Question

所以我正在使用带有HTML和javascript的Notepad ++来尝试制作一个点击游戏（类似于cookie clicker，如果你曾经玩过它）而且我只是用它来试验一些东西。我有一个不可编辑的文本字段和一个按钮，单击该按钮会将“1”添加到文本字段的值。我一直在尝试创建另一个按钮，只需在文本字段中检查大于或等于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>

Answer 1

这是错误：

<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）无效，type="text/javascript"是不需要HTML5。所以写一下

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

第三，像<input ... />这样的自动关闭标签是xHTML并且HTML5无效（虽然浏览器会容忍它，可能会触发怪癖模式（怪癖模式是浏览器尝试模拟以前的错误的模式））。此外，您错误地自动关闭了<button>标记。标记末尾的/>与使用</...>标记关闭代码的含义相同。所以：

<button />

与

相同

<button></button>

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

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

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

制作HTML游戏的东西

1 个答案: