-2

だから私はHTMLとjavascriptでNotepad ++を使って小さなクリッカーゲームを作ってみました. 編集できないテキスト フィールドと、クリックするとテキスト フィールドの値に「1」が追加されるボタンがあります。テキスト フィールドに 5 以上の値があるかどうかをチェックし、それが true の場合は 5 を引くだけの別のボタンを作成しようとしています。(最終的な目標は、3 つのボタンを用意することです。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>
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>

第 3 に、is xHTML や無効な HTML5のような自己終了タグ<input ... />です (ただし、ブラウザーはそれを許容し、quirks モードをトリガーする可能性があります (quirks モードはブラウザーが以前のバグをエミュレートしようとするモードです))。<button>また、タグを誤ってセルフクローズしました。タグの/>末尾の はタグでタグを閉じるのと同じ意味</...>です。そう：

<button />

と同じ意味

<button></button>

したがって、<button /></button>無効です。

しかし、これは xhtml ではなく html5 であるため、とにかく意味がありません/>。

HTML ではなく JavaScript で onclick ハンドラを割り当てるなど、改善できることは他にもたくさんありますが、厳密には「間違っている」わけではなく、スタイルの問題です。

于 2013-10-18T04:30:33.423 に答える