-2

所以我正在使用带有 HTML 和 javascript 的 Notepad++ 来尝试制作一个小的点击器游戏（如果你曾经玩过它，类似于 cookie 点击器），我只是用它来试验一些东西。我有一个不可编辑的文本字段和一个按钮，单击该按钮会将“1”添加到文本字段的值中。我一直在尝试创建另一个按钮，它只检查文本字段中大于或等于 5 的值，如果为真则减去 5。（最终目标是拥有三个按钮——一个在点击时检查值是否大于 5，然后减去 5，这使得另一个不可点击的按钮变为可点击，这将在点击时将值加 10就像升级一样。）

我有按钮可以将 +1 添加到值中，并且我一直在尝试获取升级按钮以启用禁用的按钮。但由于某种原因，按钮不起作用..

<!DOCTYPE html>
<html>
<head>
    <title>Button Clicker</title>
    <script language="Javascript">
function handleButtonClick() {
    var textField = document.getElementById( "textField" );
    var currentValue = parseInt(textField.value);

    // Add one
    currentValue = currentValue + 1;

    // Put it back with the new +1'd value
    textField.value = currentValue;
}
function handlebuttonclick() {
    var textField = document.getElementById( "textField" );
    var currentValue = parseInt(textField.value);

    // Minus one
    currentValue = currentValue - 1;

    // Put it back with the new -1'd value
    textField.value = currentValue;
}

</script>
</head>
<body>



<script language="Javascript" type="text/javascript">  
 function enable(){  
  if (document.form="upgrade".clicked==''){  
   document.agreement_form.clicker.disabled=true  
  }else{  
   document.agreement_form.clicker.disabled=false  
  }  
 }  
</script>

 <button type="button" form="upgrade" onclick="enable()" onclick="handlebuttonclick"/>Upgrade</button>
 <br>
 <button type="button" onClick="handleButtonClick()"/>Press here</button>
 <input type="button" value="Clicker" disabled name="clicker"> 

<input type="text" value="0" id="textField" readonly/>
</body>
</html>
4

1 回答 1

2

这是错误：

<button type="button" form="upgrade" onclick="enable()" onclick="handlebuttonclick"/>Upgrade</button>
                                        ^                   ^
                                        |                   |
                                         \                 /
                                          \               /
                                           \             /
                                            \           /
                                 you can't have two onclick handlers

解决方案是在 onclick 处理程序中简单地调用这两个函数：

onclick="enable();handlebuttonclick()"

甚至enable从内部调用handlebuttonclick：

function handlebuttonclick() {

    // ..... bunch of code    

    enable();
}

顺便说一句，一些建议：

handlebuttonclick尽量不要通过使用相似名称 ( vs handleButtonClick)声明变量和函数来混淆自己。仅仅因为它有效并不意味着它是“正确的”。源代码的主要功能是记录您的意图。使代码在计算机上执行实际上是次要功能。给你的函数起有意义的名字：

<button id='increment' onclick='handle_increment()'> + </button>
<button id='decrement' onclick='handle_decrement();enable()'> - </button>

其次，这是次要的，但由于它意味着更少的输入和更清晰的代码，因此最好遵循：language="javascript"已弃用，我认为对 HTML5（这是您的 DOCTYPE）无效，对 HTML5type="text/javascript"是不必要的。所以只写

<script>
    // javascript code...
</script>

第三，像 xHTML 这样的自闭合标签<input ... />是无效的 HTML5（尽管浏览器会容忍它，可能会触发怪癖模式（怪癖模式是浏览器试图模仿以前的错误的模式））。此外，您错误地自行关闭了<button>标签。/>标签末尾的 与用标签关闭标签的含义相同</...>。所以：

<button />

意思是一样的

<button></button>

因此，<button /></button>无效。

但这无论如何都没有实际意义，因为这是 html5 而不是 xhtml - 不要使用/>.

还有很多其他可以改进的地方，例如在 javascript 中分配 onclick 处理程序而不是 HTML 等，但它们并不是严格意义上的“错误”，它们更多的是风格问题。

于 2013-10-18T04:30:33.423 回答