Question

我一直在尝试使用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>

在RunTrial()我有

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

点击#nexttrial后，按预期转到BetweenTrial()，但大约半秒后，它会消失。我不懂为什么。如何阻止它消失？

Answer 1

因为您的按钮正在提交表单。如果表单只有1个按钮，即使你没有明确地输入type =“submit”，它也会认为它是提交。

停止只添加f.preventDefault（）;进入你的方法所以

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

希望解释它

Answer 2

问题是您的按钮（默认为类型submit）将其更改为：

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

<?php

?>
 <!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" type="button">Submit</button>
  </form>
</div>


	

</div>

</body>
<script>
	function StartScreen() {
	  $('#box').hide();
 	  $('#box2').hide();
      }
      StartScreen()
</script>

</html>

引用.click（）仅显示短期目的地

2 个答案: