jsfiddleでJavaScriptコードが異なる動作をしているのはなぜですか？

Question

私はjavaScriptを初めて使用しています。そのため、実際の根本原因を見つけることができません。 この簡単なコードは、ボタンを押すたびにボタンの値を段落に追加します。ただし、段落にゼロだけが含まれている場合は、値を置換する必要があります。

1. これは私のすべてのブラウザでうまく動作しています。また、スニペットをstackoverflowで実行しているときにも有効です。私はこの問題に直面していますし、どのような変更私はそれがすべてのプラットフォーム上で動作させるために行う必要がありますなぜhttps://jsfiddle.net/

に全く機能していない

あなたは私を教えてくださいことはできますか？デフォルトJSFiddleことで

function append(a){ 
 
    if (document.getElementById('text1').innerHTML == '0') 
 
    document.getElementById('text1').innerHTML = document.getElementById(a).value; 
 
    else 
 
    document.getElementById('text1').innerHTML += document.getElementById(a).value; 
 
};

<div> 
 
<p id='text1' style="border-style: inset; 
 
     width:200px; 
 
     display:inline-block;">0</p><br> 
 
<button value="1" id='a1' onclick="append(this.id)">1</button></div> 
 

Answer 1

はonload機能であなたJavaScriptをラップします。これは、function appendがそのスコープ内でのみ定義され、グローバル化されていないことを意味します。

グローバル変数（および関数）は、一般に、インラインイベントハンドラと同様に、悪い習慣とみなされます。

試してみてください。

document.getElementById('a1').onclick = append; 

はその後、function appendの内側に、単にthis.valueを参照してください。