Question

我想制作一个包含3个问题的应用程序，每个问题都有2个按钮：是和否。我想在响应中输出不同的段落，具体取决于答案是真还是假（不是警告消息！）。我该怎么办？

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

Answer 1

每个问题的是/否按钮都有一个点击事件回调函数，它将检查给出的答案并提供正确的输出。

请勿使用submit按钮，因为您实际上并未在任何地方提交表单数据，而常规button类型会提供。

通过将我在下面显示的3个函数组合成一个函数，可以稍微优化一下，但这会使代码复杂化到初学者级别以外，所以你现在可能想要坚持使用这种方法。

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

根据用户输入的答案是真还是假，将段落输出到网页

1 个答案: