做一个HTML游戏式的东西

Making an HTML game-ish thing

本文关键字：游戏 HTML 一个      更新时间：2023-09-26

所以我使用带有HTML和javascript的Notepad++来尝试制作一个小的点击游戏(如果你曾经玩过它，类似于cookie点击器(，我只是用它来试验东西。我有一个不可编辑的文本字段和一个按钮，单击该按钮会将"1"添加到文本字段的值中。我一直在尝试创建另一个按钮，该按钮仅检查文本字段中大于或等于 5 的值，如果为 true，则减去 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>

这是错误：

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

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

onclick="enable();handlebuttonclick()"

甚至从handlebuttonclick内部呼叫enable：

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(无效，并且对于HTML5 type="text/javascript"是不必要的。所以写

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

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

<button />

意思相同

<button></button>

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

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

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

相关文章：