Javascript 引用。单击（）仅在短时间内显示目标_Javascript_Html

Javascript 引用。单击（）仅在短时间内显示目标

javascript html

Javascript 引用。单击（）仅在短时间内显示目标,javascript,html,Javascript,Html,我一直在尝试使用html/js创建一个简单的实验我目前的代码是： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> var curTrial = 0; var stimuli = ['http:

我一直在尝试使用html/js创建一个简单的实验

我目前的代码是：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>

  <script>
  var curTrial = 0;
  var stimuli = ['http://www.getty.edu/museum/media/images/web/enlarge/00066001.jpg',
  'http://www.getty.edu/museum/media/images/web/enlarge/00055301.jpg',
  'http://www.getty.edu/museum/media/images/web/enlarge/00066301.jpg']


/* Start the experiment */
function RunTrial() {
    $('#startTrial').hide();
    $('#box').hide();
    $('#box2').show();
    $('#trialNum').text(curTrial);
    $("#nexttrial").click(function(f) { BetweenTrial(); });
}

function StartExperiment() {
  startTime = new Date();
  $('#instructions').hide();
  $('#box').show();
  $('#box2').hide();
  $('#intrucBox').show();
  $("#next").click(function(f) { RunTrial(); });

//  $(document).bind("keypress.start", function(e) { RunTrial(); });
  }


function BetweenTrial(){
  $('#box2').hide();
  $('#box').show()
  $('#startTrial').show()
  $("#next").click(function(f) { RunTrial(); });
    } 


  </script>
</head>


<body>
<div id="instructions">
  <p> Visual perception of <strong>material properties. </strong></p> 
  <p style="text-align: center"><a href="javascript:StartExperiment()" id="startExperimentButton">
  StartExperiment</a></p>
  <div id="consentDiv">
  <p><u>Consent to Participate in Research:</u></p>    
  <p> <br> <br>By starting the experiment you consent to the EULA.</p>
  <p>By participating you are confirming that you are over 18 years of age
  and have normal or corrected-to-normal vision.</p>
  </div>
</div>

<div id="box" style="text-align:center">
    <div id="startTrial">Press any key to start the next trial</div>
      <button id="next">Submit</button>

</div>


<div id="box2" style="text-align:center">   
    <div id="trialNum" style="text-align:left"></div>

    <img src="http://images.metmuseum.org/CRDImages/ad/web-large/DT212230.jpg" id="image"> 

    <form >
  Question 1:<br>
  <input type="text" name="firstname" value="answer"><br>
  Question 2:<br>
  <input type="text" name="lastname" value="answer">
  <br><br>

  <button id="nexttrial">Submit</button>
  </form>
</div>




</div>

</body>
<script>
    function StartScreen() { //Hide the parts of the website we don't need to show  yet
      $('#box').hide();
      $('#box2').hide();
      }
      StartScreen()
</script>

</html>

当单击nexttrial时，它会像预期的那样进入中间状态，但大约半秒钟后，它消失了。我不明白为什么。如何阻止它消失？

问题在于您的按钮错误在于键入提交将其更改为：

<button id="nexttrial" type="button">Submit</button>

var-curTrial=0；变量刺激=['http://www.getty.edu/museum/media/images/web/enlarge/00066001.jpg', 'http://www.getty.edu/museum/media/images/web/enlarge/00055301.jpg', 'http://www.getty.edu/museum/media/images/web/enlarge/00066301.jpg'] /*开始实验*/ 函数运行试验{ $'startTrial'。隐藏； $'box'。隐藏； $‘box2’。显示； $‘trialNum’。文本文件； $nexttrial.clickfunctionf{betweentral；}； } 功能启动试验{ 开始时间=新日期； $‘指令’。隐藏； $‘盒子’。显示； $'box2'。隐藏； $'intrucBox'。显示； $next.clickfunctionf{RunTrial；}； //$document.bindkeypress.start，函数{RunTrial；}； } 中心函数{ $'box2'。隐藏； $‘盒子’。显示 $'startTrial'。显示 $next.clickfunctionf{RunTrial；}； } 材料特性的视觉感知

同意参与研究：

通过开始实验，您同意EULA

通过参与，您确认您已超过18岁视力正常或矫正至正常

按任意键开始下一次试用提交问题1：问题2：提交函数StartScreen{ $'box'。隐藏； $'box2'。隐藏； } StartScreen

问题是您的按钮错误是类型提交更改为：

<button id="nexttrial" type="button">Submit</button>

同意参与研究：

通过开始实验，您同意EULA

通过参与，您确认您已超过18岁视力正常或矫正至正常

按任意键开始下一次试用提交问题1：问题2：提交函数StartScreen{ $'box'。隐藏； $'box2'。隐藏； } StartScreen

这是因为您的按钮正在提交表单。如果一个表单只有一个按钮，它将假定它是提交按钮，即使您没有显式地将type=submit

要停止这种情况，只需添加f.preventDefault；在你的方法中也是如此

$("#nexttrial").click(function(f) { f.preventDefault(); BetweenTrial(); });

希望这能解释它的原因，因为您的按钮正在提交表单。如果一个表单只有一个按钮，它将假定它是提交按钮，即使您没有显式地将type=submit

要停止这种情况，只需添加f.preventDefault；在你的方法中也是如此

$("#nexttrial").click(function(f) { f.preventDefault(); BetweenTrial(); });

希望这能解释这不是一个错误。你提交一份表格。提交表单时，页面将使用要提交的参数进行重新加载https://tryit.w3schools.com/tryit_view.php?firstname=answer&lastname=answer 这就是你的页面消失的原因。这不是一个错误。你提交一份表格。提交表单时，页面将使用要提交的参数进行重新加载https://tryit.w3schools.com/tryit_view.php?firstname=answer&lastname=answer 这就是你的页面消失的原因。使用type=按钮应该是现在可以接受的答案。我不知道按钮默认设置。谢谢。使用type=按钮应该是可以接受的答案，因为它现在可以工作了。我不知道按钮默认设置。非常感谢。