referenzieren auf .click() nur Ziel für eine kurze Zeit zeigen

Ich habe versucht, ein einfaches Experiment mit HTML/Js zu erstellen.referenzieren auf .click() nur Ziel für eine kurze Zeit zeigen

Mein aktueller Code ist:

<!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>

In RunTrial() I

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

haben Wenn #nexttrial geklickt wird, geht es zu BetweenTrial() wie erwartet, aber nach etwa einer halben Sekunde, verschwindet es. Ich verstehe nicht warum. Wie verhindere ich das Verschwinden?

Quelle

2017-02-24 Mitchell van Zuylen

Es ist nicht ein Fehler erklärt. Sie reichen ein Formular ein. Wenn das Formular abgeschickt wird, lädt die Seite mit den Parametern nach "https://tryit.w3schools.com/tryit_view.php?firstname=answer&lastname=answer" 'Deshalb verschwindet Ihre Seite. – DomeTune

sein, weil Ihre Taste, um das Formular absenden. Wenn ein Formular nur eine Schaltfläche hat, wird davon ausgegangen, dass es das Senden ist, auch wenn Sie type = "submit" nicht explizit angeben.

um zu stoppen, fügen Sie einfach f.preventDefault(); in Ihre Methode wäre, so

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

Hoffnung, dass es

Quelle

2017-02-24 09:22:16

Es tut! Vielen Dank. –

Das Problem Ihre Schaltfläche ist (Standard ist submit Typ) ändern Sie es zu:

<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() { 
 
\t $('#startTrial').hide(); 
 
    $('#box').hide(); 
 
    $('#box2').show(); 
 
    $('#trialNum').text(curTrial); 
 
\t $("#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> \t  
 
    <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"> 
 
\t <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"> 
 
\t <div id="trialNum" style="text-align:left"></div> 
 

 
\t <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> 
 

 

 
\t 
 

 
</div> 
 

 
</body> 
 
<script> 
 
\t function StartScreen() { 
 
\t $('#box').hide(); 
 
    \t $('#box2').hide(); 
 
     } 
 
     StartScreen() 
 
</script> 
 

 
</html>

Quelle

2017-02-24 09:21:43

using type = "button" sollte die angenommene Antwort sein imo – Logar

Es funktioniert jetzt. Ich war mir nicht bewusst, Knopf-Standards. Vielen Dank. –

referenzieren auf .click() nur Ziel für eine kurze Zeit zeigen

Antwort

Verwandte Themen