Javascriptの文書の書き込みボタンは、私はjavascriptの小さなゲームを作るしようとしている楽しみのためだけに

Question

を働いていない、私はこれは私が何ができるかのテストの多かったプログラミングにはかなり新しいです。

私はボタンを押したときに、これは正しく新しいボタンを表示させるんが

function clickStart(){ 
document.write("<input type='button' value='attack!' onClick='clickAttack();' /"); 

この新しいボタンを押したときには、その下の機能をreconizeませんたまたま関数の内部で、次のいる

他の関数は次のようになります

function clickAttack(){ 
    if(heroHealth >= 0 && monsterHealth >= 0){ 

この関数は、最初の関数を終了した直後です。

。コンソールは、私が、私はこの問題を解決できたかどうかはわかりません、次の

ReferenceError: clickAttack is not defined 

を与えます。彼らはあなたがそれらに使用するすべての機能がグローバルであることが必要です。

ヘルプは、これはonxyz -attributeスタイルのイベントハンドラを使用しない多くの理由の一つである

Answer 1

をにappriciatedされます。グローバルはBad Things™です。あなたの機能は明らかにグローバルではありません。これはGood Thing™です。

別に、document.writeは2016（または2006）でのWeb開発における基本的に場所がありません。代わりに、DOMを使用します。

function clickStart() { 
    var input = document.createElement("input"); 
    input.type = "button"; 
    input.value = "attack!"; 
    input.addEventListener("click", clickAttack, false); 
    document.body.appendChild(input); 
} 

Answer 2

こんにちは、私はあなたがjQueryライブラリを使用することをお勧めします、あなたのケースでそれを行うことの一つの利点は、それがグローバルでなければならなくなっclickAttackを意味していることではありません。コードはあなたのために簡単になります。あなたのための

私のソリューションは、here in jsFiddle

である私は、あなたが何か質問は私に連絡すること自由に感じている場合はinit関数がevent listener.on()クリックして、このコール攻撃機能

を登録自己invoke functionを使用。

JSコード：

(function(){ 
    'use strict'; 

    function attack() { 
    $('#logger').append('Attacked!<br>'); 
    }; 

    function init() { 
     $('#attackBtn').on('click', function() { 
     attack(); 
    }); 
    }; 

    init(); 
})(); 

Answer 3

それとも、このようにjqueryのを使用することができます。

$(document).ready(function(){ 
    $('body').on('click', '.myButton' , clickAttack);     
}); 


function clickStart(){ 
     $("body").append($("<input type='button' value='attack!' class='myButton'/>")); 
     } 
function clickAttack(){ 
     alert("hello"); 
     } 



<input type='button' value='add!' onClick='clickStart();' />