为什么我的JavaScript代码在jsfiddle上显示不同的行为？

Question

我是javaScript的新手，这就是为什么我无法找到它的真正根本原因。 这个简单的代码是每次按下它时将按钮的值附加到段落中;但是如果段落只包含零，那么它应该替换值，而不是追加。

1. 这在我的所有浏览器以及在stackoverflow上运行代码段时都能正常工作。
2. https://jsfiddle.net/
上根本不工作

您能告诉我为什么我要面对这个问题，我应该做些什么改变才能让它在每个平台上运行？

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

默认情况下，JSFiddle将您的JavaScript包装在onload函数中。这意味着function append仅在该范围内定义，并且不是全局的。

全局变量（和函数）通常被认为是不良实践，内联事件处理程序也是如此。

尝试：

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

然后，在function append内，只需参考this.value。