按钮无法使用Javascript

Button not working Javascript

本文关键字：Javascript 按钮      更新时间：2023-09-26

我正在做一个javascript练习来创建一个猜谜游戏。在进入下一阶段之前，我正在对该功能进行一些测试，但这不起作用。当你点击按钮时，它不会弹出"正确答案！"。有什么想法吗？

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

有两个问题：

  • 按钮操作是"提交"更改它：type="button"

  • 您的输入id为"Guess"，这与函数名称冲突。

因此，当你改变按钮的类型并重命名功能时，它就会起作用。

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

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

这是您的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>

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

此外，您可以使用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>

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

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

问题是函数名称与输入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/

    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是"Guess"，函数名是"Guest"，所以这可能是"对象不是函数"错误背后的原因。我还在对我的回答的评论中删除了下面讨论中的模棱两可的陈述。

相关文章：