Question

我正在开展一个javascript练习来创建一个猜谜游戏。我在进入下一阶段之前对该功能进行了一些测试，但这并不起作用。当您点击按钮时，它没有弹出“＃14;正确答案！”＃34;。有什么想法吗？

<html>
<head>
<script>
var userguess = "5";
var answer = "5"; 

function Guess(){
if (userguess==answer){

alert("right answer!");
} else {

alert("wrong answer!");
} 
}
</script>
</head>
<body>
<form>
<input id="Guess" type="text" />
<button name="button" onClick="Guess()">Click me</button>
</form>
</body>
</html>

Answer 1

有两个问题：

按钮操作是＆＃34;提交＆＃34;改变它： type="button"
您的输入有ID＆＃34;猜猜＆＃34;，这与功能名称冲突。

因此，当您更改按钮的类型并重命名该功能时，它将起作用。

Answer 2

当您点击表单内的按钮时，它将提交表单并重新加载页面。要解决此问题，请使用type="button"。它会阻止按钮作为提交按钮

<form>
    <input id="Guess" type="text" />
    <button name="button" type="button" onClick="Guess()">Click me</button>
</form>

Answer 3

您的form尝试提交价值：

http://jsfiddle.net/70ag6ang/

<head>
   <script>
     var userguess = "5";
     var answer = "5"; 

     function Guess(event){

     if (userguess==answer){

          alert("right answer!");
      } else {

     alert("wrong answer!");
    } 
}
</script>
</head>
<body>

<input id="Guess" type="text" />
<button name="button" onclick="Guess()">Click me</button>

</body>

Answer 4

这是因为按钮会触发要提交的表单。

另外，您可以使用addEventListener方法：

<html>
  <head>
    <script>
    var userguess = "5";
    var answer = "5"; 

    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('.my-button').addEventListener('click', function(event) {
        event.preventDefault();
        if (userguess==answer){
          alert("right answer!");
        } else {
          alert("wrong answer!");
        } 
      });
    }, false);

    </script>
  </head>
<body>
    <form>
      <input id="Guess" type="text" />
      <button name="button" class="my-button">Click me</button>
    </form>
  </body>
</html>

第一个addEventListener会在添加所有DOM元素时进行侦听。或者，您可以将<script>标记放在<body>元素之后。

第二个使用click侦听您找到的元素上的document.querySelector事件。请注意，我已在元素中添加了一个类my-button。

Answer 5

问题是函数名称与输入id冲突

尝试以下代码

Html

<body>
<form>
<input id="Guess" type="text" />
<button name="button" type="button" onClick="guess()">Click me</button>
</form>
</body>

Javascript

var userguess = "5";
var answer = "5"; 

function guess(){
if (userguess==answer){

alert("right answer!");
} else {

alert("wrong answer!");
} 
}

你可以查看这里

http://jsfiddle.net/L1x184nk/

Answer 6

    var userguess = "5";
    var answer = "5";
    function GuessFn() {

      if (userguess == answer) {

        alert("right answer!");
      } else {

        alert("wrong answer!");
      }
    }

    <form>
      <input id="Guess" type="text"/>
      <button name="button" onclick="GuessFn()">Click me</button>
    </form>

更新：在阅读OP线程中的注释后，我注意到他的元素ID是“猜测”以及函数名称是“猜猜”，所以这可能是“对象不是函数”错误背后的原因。我也在下面的讨论中删除了我的含糊不清的陈述，对我的回答进行了评论。

按钮不工作Javascript

6 个答案: