Question

我需要在用户单击“提交”按钮以检查其答案并根据给出的答案返回文本后执行的功能。当我输入文本并单击提交按钮时，什么也没有发生。单击提交按钮应执行该功能。然后根据答案是对还是错，返回一些文本。我怀疑我的语法中有些内容，但是我已经检查了无数次。

这是我的代码：

 <!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Riddle Me This</title>
        <link href="HW6Part2.css" type="text/css" rel="stylesheet"/>



    </head>
        <body>
            <div class="text">
                <h1 class="head1">First Riddle:</h1>
                <p class="first">The more you take, the more you leave behind. What am I?</p>
                <h1 class ="head2">Second Riddle:</h1>
                <p class="second">What has a head, a tail, is brown, and has no legs?</p>
                Input your answer: <br><br>
                <form onsubmit="checkAnswer(event)">
                    Input your answer for the first riddle: <br><br>
                    <input id="a1" type="text">
                    <br><br>
                    Input your answer for the second riddle: <br><br>
                    <input id="a2" type="text">
                    <br>
                    <br>
                    <input type="submit" value="Submit">
                </form>
                <p id="response1"></p>

            <script>
            //Initiate function:
function checkAnswer() {
    e.preventDefault();
    //Get the user's input
    var ans = document.getElementById('a1');
    var ans2 = document.getElementById('a2');
    //Compare input to the right answer
    if (ans != 'footsteps' && ans2 != 'penny'){
    document.getElementById('response1').innerHTML = 'Both answers are wrong! Try harder!';}
    else if (ans == 'footsteps' && ans2 != 'penny'){
    document.getElementById('response1').innerHTML = 'You have solved the first riddle, but failed on the second! Try harder!';}
    else if (ans != 'footsteps' && ans2 == 'penny'){
    document.getElementById('response1').innerHTML = 'You have solved the second riddle, but failed on the first! Try harder!';}
    else{
document.getElementById('response1').innerHTML = 'You have solved both riddles, smartass. Have a cookie!';}
}

// When it loses focus call checkAnswer()
a1.addEventListener('blur', checkAnswer, false);

            </script>

            <br>
            <br>






        </div>  
        </body>
</html>

Answer 1

function checkAnswer(e) {
            e.preventDefault();
            //Get the user's input
            var ans = document.getElementById("a1").value;
            var ans2 = document.getElementById("a2").value;
            //Compare input to the right answer
            if (ans != "footsteps" && ans2 != "penny") {
              document.getElementById("response1").innerHTML =
                "Both answers are wrong! Try harder!";
            } else if (ans == "footsteps" && ans2 != "penny") {
              document.getElementById("response1").innerHTML =
                "You have solved the first riddle, but failed on the second! Try harder!";
            } else if (ans != "footsteps" && ans2 == "penny") {
              document.getElementById("response1").innerHTML =
                "You have solved the second riddle, but failed on the first! Try harder!";
            } else {
              document.getElementById("response1").innerHTML =
                "You have solved both riddles, smartass. Have a cookie!";
            }
          }
          // When it loses focus call checkAnswer()
         // a1.addEventListener("blur", checkAnswer, false);

  <h1>First Riddle:</h1>
        <p>The more you take, the more you leave behind. What am I?</p>
        <h1>Second Riddle:</h1>
        <p>What has a head, a tail, is brown, and has no legs?</p>
        Input your answer: <br /><br />
        <form onsubmit="checkAnswer(event)">
          Input your answer for the first riddle: <br /><br />
          <input id="a1" type="text" />
          <br /><br />
          Input your answer for the second riddle: <br /><br />
          <input id="a2" type="text" />
          <br />
          <br />
          <input type="submit" value="submit" />
        </form>

        <p id="response1"></p>

Answer 2

我检查了您的代码，并在第44行的“ a2”处发现了语法错误。在下面的代码中，我修复了语法错误。下面的代码可以正常工作。

<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Riddle Me This</title>
        <link href="HW6Part2.css" type="text/css" rel="stylesheet"/>
    </head>
        <body>
            <h1>First Riddle:</h1>
            <p>The more you take, the more you leave behind. What am I?</p>
            <h1>Second Riddle:</h1>
            <p>What has a head, a tail, is brown, and has no legs?</p>
            Input your answer: <br><br>

                Input your answer for the first riddle: <br><br>
                <input id="a1" type="text">
                <br><br>
                Input your answer for the second riddle: <br><br>
                <input id="a2" type="text">
                <br>
                <br>

                 <button onclick="checkAnswer()">Submit</button> 

            <script>
            //Initiate function:
            function checkAnswer() {
                //Get the user's input
                var ans = document.getElementById('a1');
                var ans2 = document.getElementById('a2');
                //Compare input to the right answer
                if (ans != 'footsteps' && ans2 != 'penny'){
                document.getElementById("response1").outerHTML = 'Both answers are wrong! Try harder!';}
                else if (ans == 'footsteps' && ans2 != 'penny'){
                document.getElementById("response1").outerHTML = 'You have solved the first riddle, but failed on the second! Try harder!';}
                else if (ans != 'footsteps' && ans2 == 'penny'){
                document.getElementById("response1").outerHTML = 'You have solved the second riddle, but failed on the first! Try harder!';}
                else{
                document.getElementById("response1").outerHTML = 'You have solved both riddles, smartass. Have a cookie!';}}
                </script>
                <br>
                <br>
                <p id="response1"></p>

        </body>
</html>```

提交时不起作用

2 个答案: