javascriptの変数を関数外に出力する

Question

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
}); 
}); 
document.write(userChoice); 

clickイベントの後にユーザー出力を取得しようとしています。しかし、私はこのコードを実行するとき、私は "未定義"として出力を取得します。私はプログラミングに非常に新しいです。

document.write(userChoice); 

は、ページのロード上で実行され、いくつかのclickアクションを実行するときuserChoiceは、新しい値を取得し、ため

Answer 1

クリックで更新されることはありません、document.writeを使用しないでください。それは非常に悪い習慣と考えられています。代わりに、DOM要素のテキストを修正して出力を表示します。

第2に、問題は、ページのロード時にuserChoiceの値をチェックするだけであるためです。あなたはこのように、代わりにclickイベントのそれぞれの下にそれをチェックする必要があります。しかし、あなたはDRYを使用してこのコードをさらに向上させることができることを

$(document).ready(function() { 
 
    $("#rock").click(function() { 
 
    var userChoice = "rock"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
    
 
    $("#paper").click(function() { 
 
    var userChoice = "paper"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
    
 
    $("#scissors").click(function() { 
 
    var userChoice = "scissors"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="rock">Rock</button> 
 
<button id="paper">Paper</button> 
 
<button id="scissors">Scissors</button> 
 
<div id="output"></div>

注意（自分を繰り返してはいけない）の原則を。これを行うには、すべての要素にクラスを適用し、単一のイベントハンドラを使用します。ページのロード後にdocument.writeを実行することはありません

$(document).ready(function() { 
 
    $(".choice").click(function() { 
 
    userChoice = this.id; 
 
    $('#output').text(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="rock" class="choice">Rock</button> 
 
<button id="paper" class="choice">Paper</button> 
 
<button id="scissors" class="choice">Scissors</button> 
 
<div id="output"></div>

Answer 2

です。

だから、これを試してみてください。

$("#scissors").click(function(){ 
    userChoice = "scissors"; 
    console.log(userChoice); 
}); 

注：はこのようdocument.write()を使用しないでください、あなたのページ全体を空白にするとuserChoice

Answer 3

でテキストのみを表示しますクリックコールバック関数の内部document.write()を入れて：

を

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
    document.write(userChoice); 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
    document.write(userChoice); 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
    document.write(userChoice); 
}); 
}); 

document.write()が呼び出されます一度ページが読み込まれ、この時間だけが読み込まれます。しかし、userChoiceに初期化時の値を与えなかったので、値はundefinedです。いずれかのボタンをクリックすると、userChoiceの値は変更されますが、document.write()は再び呼び出されません。

Answer 4

クリックイベント内に印刷を配置する必要があります。 ページが読み込まれると、すぐにdocument.writeが起動し、その時点でnullが返されます。

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
    console.log(userChoice);//THIS WAY 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
}); 
}); 

Answer 5

機能を1つだけ交換して、innerHTMLを使用して機能を変更するか、値のある場所で変更してください。

あなたdocument.write(userChoice);は、クリックイベントの前に実行され、まず

var userChoice; 
 
$(document).ready(function() { 
 
    $(".choice").click(function(){ 
 
    userChoice = this.innerHTML; 
 
    console.log(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="choice">rock</p> 
 
<p class="choice">paper</p> 
 
<p class="choice">scissors</p>

Answer 6

1. を。代わりに、いくつかのタグを更新してください。html（）
2. 何かをクリックする前に書き込みを実行します。

あなたはおそらく、より良いあなたの最終的なコードが、コードの実行についての詳細な説明与えていない、私が思う

var userChoice = ""; 
 
$(document).ready(function() { 
 
    $(".hitme").click(function() { 
 
    userChoice = this.id; 
 
    $("#choice").html(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="hitme" type="button" id="rock">Rock</button> 
 
<button class="hitme" type="button" id="paper">Paper</button> 
 
<button class="hitme" type="button" id="scissors">Scissors</button> 
 
<span id="choice"></span>

Answer 7

を意味する：

を使用しないでくださいを

document.write 

危険です、それは、ページが既に読み込まれているときに、HTMLページ全体を書き換えることができます。あなたのケースでのdivのクリックを：出力は「未定義」に設定されている

変数

userChoice 

がまだ初期化されていないため、ユーザーがイベントをトリガしたら、それが初期化されます。だからあなたのいずれかのよう、なeventHandlerに

(eg: $('.some_div').innerHTML = userChoice) 

を "userChoice" 印刷/推敲を移動：http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/：

$("#scissors").click(function(){ .... }) 

JavaScriptの実行/実行時間についてのよりよい情報のため、このガイドをお読みください。 将来的には一般的なコーディングが好きなら、Javascriptに関する他の興味深い質問を投稿してください！