Sortie du paragraphe à la page Web selon si une réponse d'utilisateur est vraie ou fausse

Je veux faire une demande avec 3 questions, chacune avec 2 boutons: oui et non. Je veux sortir un paragraphe différent en réponse, selon que la réponse était vraie ou fausse (pas un message d'alerte!). Comment je procède?Sortie du paragraphe à la page Web selon si une réponse d'utilisateur est vraie ou fausse

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Tegne med Javascript</title> 
    <script> 

    function oppstart() { 
      function hs(){ 
     document.getElementById('utskrift').onclick = "riktig"; 
     } 
     function hu(){ 
     document.getElementById('utskrift').onclick = "feil"; 
    } 
     function ss(){ 
     document.getElementById('utskrift1').onclick = "riktig"; 
     } 
     function su(){ 
     document.getElementById('utskrift1').onclick = "feil"; 
     } 
     function ts(){ 
     document.getElementById('utskrift2').onclick = "riktig"; 
     } 
     function tu(){ 
     document.getElementById('utskrift2').onclick = "feil"; 
    } 
    } 

    </script> 
    </head> 

    <body> 
    jeg har hode 
    <p id="utskrift"></p> 
    <button type="submit" id="hs">Sann</button> <button type="submit" 
    id="hu">USann</button> 
    <br> 
    <br> 


    <p id="utskrift1"></p> 
    jeg liker Skyrim <button type="submit" id="ss">Sann</button> <button 
    type="submit" id="su">USann</button> 
     <br> 
     <br> 


     <p id="utskrift2"></p> 
    jeg heter Tarzan <button type="submit" id="ts">Sann</button> <button 
    type="submit" id="tu">USann</button> 

    </body>

Source

2017-07-04 Eirik Andreas Gustavsen

Je ne comprends pas ce que vous entendez par la messagerie pour déterminer si la réponse est vraie ou fausse. Voulez-vous dire que vous voulez que le programme vérifie si la réponse est vraie ou fausse, puis affiche un message différent pour chacune de ces deux conditions? –

oui. Je ne sais pas quoi faire pour que cela fonctionne –

Vous pouvez trouver la réponse à cette question utile https://stackoverflow.com/questions/34714152/comparing-strings-in-an-if-statement –

Les boutons Oui/Non de chaque question auront une fonction de rappel d'événement de clic qui vérifiera la réponse donnée et délivrera la sortie correcte. N'utilisez pas les boutons submit pour cela car vous ne soumettez pas de données de formulaire partout, les types button habituels le feront.

Cela peut être optimisé un peu en combinant les 3 fonctions que je montre ci-dessous en une seule, mais cela compliquera le code au-delà du niveau débutant, donc vous pouvez vouloir suivre cette approche pour l'instant.

// Get references to all of the buttons 
 
var q1P = document.getElementById("utskrift1"); 
 
var q1Sann = document.getElementById("hs"); 
 
var q1Usann = document.getElementById("hu"); 
 

 
var q2P = document.getElementById("utskrift2"); 
 
var q2Sann = document.getElementById("ss"); 
 
var q2Usann = document.getElementById("su"); 
 

 
var q3P = document.getElementById("utskrift3"); 
 
var q3Sann = document.getElementById("ts"); 
 
var q3Usann = document.getElementById("tu"); 
 

 
// Set up each set of buttons to invoke a validation function when they are clicked 
 
q1Sann.addEventListener("click", q1Validate); 
 
q1Usann.addEventListener("click", q1Validate); 
 

 
q2Sann.addEventListener("click", q2Validate); 
 
q2Usann.addEventListener("click", q2Validate); 
 

 
q3Sann.addEventListener("click", q3Validate); 
 
q3Usann.addEventListener("click", q3Validate); 
 

 
// Validation functions 
 
function q1Validate (evt) { 
 
    var message = ""; 
 

 
    // Test which button was clicked and populate the appropriate paragraph accordingly 
 
    if(evt.target === q1Sann){ 
 
    message = "Correct!"; 
 
    } else { 
 
    message = "Incorrect!"; 
 
    } 
 
    
 
    // Update the paragraph with the message 
 
    q1P.textContent = message; 
 
} 
 

 
function q2Validate (evt) { 
 
    var message = ""; 
 

 
    // Test which button was clicked and populate the appropriate paragraph accordingly 
 
    if(evt.target === q2Sann){ 
 
    message = "Correct!"; 
 
    } else { 
 
    message = "Incorrect!"; 
 
    } 
 
    q2P.textContent = message; 
 
} 
 

 
function q3Validate (evt) { 
 
    var message = ""; 
 

 
    // Test which button was clicked and populate the appropriate paragraph accordingly 
 
    if(evt.target === q3Sann){ 
 
    message = "Correct!"; 
 
    } else { 
 
    message = "Incorrect!"; 
 
    } 
 
    q3P.textContent = message; 
 
}

p { color: blue; }

<div> 
 
    jeg har hode 
 
    <button type="button" id="hs">Sann</button> 
 
    <button type="button" id="hu">USann</button> 
 
    <p id="utskrift1"></p> 
 
</div> 
 

 
<div> 
 
    jeg liker Skyrim 
 
    <button type="button" id="ss">Sann</button> 
 
    <button type="button" id="su">USann</button> 
 
    <p id="utskrift2"></p>  
 
</div> 
 

 
<div> 
 
    jeg heter Tarzan 
 
    <button type="button" id="ts">Sann</button> 
 
    <button type="button" id="tu">USann</button> 
 
    <p id="utskrift3"></p> 
 
</div>

Source

2017-07-04 17:21:32

Merci! Essayer de le faire fonctionner moi-même. Vous avez une petite erreur Uncaught TypeError: Impossible de lire la propriété 'addEventListener' de null au premier addEventLister? peut-être que toute cette section va mal pour moi, pas sûr. Mais tu as fait ce que je voulais faire. Je peux juste le faire fonctionner seul. –

Vous devez vous assurer que tout le code JavaScript est placé juste avant la fermeture de la balise body (). De cette façon tout le HTML a été lu dans la mémoire avant que le JavaScript essaye d'y accéder –

pourriez-vous également montrer pour faire ceci avec une fonction au lieu de 3? – DCR

Sortie du paragraphe à la page Web selon si une réponse d'utilisateur est vraie ou fausse

Répondre

Questions connexes