Question

我正在尝试构建Trivia游戏，现在我有一个问题和3个答案（单选按钮），用户将选择一个答案，然后单击“提交”。如果回答错误，则按钮将显示“重试”，而不是“提交”。首先，我只是开始学习Javascript，我很确定有一种简单/更好的方法来使用一个按钮提交，然后在答案错误的情况下“重试”。我刚刚创建了两个函数，第一个 function（）会检查答案，如果答案不正确，它将跳转到 wrongAnswer（）。此函数用于更改文本的按钮，更改按钮的onclick（这样我可以增加“点击”的次数），并检查是否有超过1次的点击（如果为true：location.reload），我想不出一种更好的方式让用户再次尝试回答问题（答案为“错误”后，其他单选按钮显示为灰色）。

这也是为什么我放

var点击次数= 0；功能之外是NaN ...为什么？

我的主要问题，第二次单击将使我出现此错误，而不是增加“点击次数”（HTML上未定义，但这就是我更改代码中所见属性的原因 < / p>

未捕获的ReferenceError：错误的答案未定义在HTMLInputElement.onclick（index.html：1）

尽管我可以在按钮上看到检查onclick现在是= rongAnswer（）;

我的HTML：

<input class="submit" id="mybtn" onclick="userChoose()" type="submit" value="Submit!">

    <p>Clicks: <a id="clicks">0</a></p>

我的javaScript：

function wrongAnswer() {
var clicks = 0;  // for how many button clicks
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;

var btn = document.getElementById("mybtn");
btn.value = 'Try again'; // Will just add a hidden value
btn.innerHTML = 'Try again'; // Even without inner it works ??? (not sure why)
btn.style.fontSize = "x-large"; // Made the text a little bit smaller

document.getElementById( "mybtn" ).setAttribute( "onclick", "wrongAnswer();" );


}

}

最后，如果有人可以解释我做错了什么，并且有更好的方法代替在“错误答案”之后再次单击按钮来重新加载页面，那么我将很高兴。

 if (clicks = 2){
    location.reload;
    }

Answer 1

如果我在这里理解您的问题，请举一个例子：

在此示例中，我有一个问题和3个单选按钮（answer1，answer2和answer3）..如果用户单击单选按钮1（answer1），则他得到一个工作良好的警报，否则得到一个具有重试的警报，按钮值为重试！。用户在单击“重新尝试”页面时将重新加载...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title> test</title>
<style>
</style>
<script type="text/javascript">
  function userChoose(){

    //control the value button if it is submit or retry
    let btn=document.getElementById('mybtn');
    if(btn.value=="Submit!"){

        //user have to answer
        let answer= document.getElementById('answer1');
        if(answer.checked){

          alert('good job!');
        }
        else{

            //wrong answer
            alert("Retry!");
            document.getElementById('mybtn').value="Tryagain!"
        }

    }
    else{

        //call function wrongAnswer()
        wrongAnswer();

    }
  }
  function wrongAnswer(){
    location.reload();
  }
</script>
</head>
<body>
<p>QUESTION....</p><br>
<div>
  <input type="radio" name="answer" id="answer1" value="a1">answer1<br>
  <input type="radio" name="answer" id="answer2" value="a2">answer2<br>
  <input type="radio" name="answer" id="answer3" value="a3">answer3<br>
</div>
<br>
<input class="submit" id="mybtn" onclick="userChoose()" type="submit" value="Submit!">
</body>
</html>

希望这会有所帮助

Javascript-在执行第一个功能后更改我的按钮onclick功能

1 个答案: