爲什麼我的JavaScript代碼在jsfiddle上顯示不同的行爲？

我是javaScript的新手，這就是爲什麼我無法找到真正的根本原因。這個簡單的代碼是每次按下按鈕時將按鈕的值附加到段落中;但是如果段落只包含一個零，那麼它應該替換該值，而不是附加。爲什麼我的JavaScript代碼在jsfiddle上顯示不同的行爲？

這對我所有的瀏覽器以及在運行stackoverflow上的代碼片段時都可以正常工作。
不工作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>

來源

2017-04-19 mudit Panwar

在JSFiddle中，您需要將您的JavaScript * Load Type *更改爲'不包裝 - '。默認情況下，JSFiddle上的腳本被包裝在一個文檔加載處理程序中，因此'append'不在元素的相同範圍內聲明。 – Santi

因爲jsFiddle認爲將所有的JS代碼放在一個函數中而不明確是個好主意。所以你的'append（）'函數不是全局的。由於他們的設計決定，StackOverflow上有像您這樣的數百個問題。 – 2017-04-19 18:03:47

默認的jsfiddle包裝在一個onload功能，你的JavaScript。這意味着function append僅在該範圍內定義，並且不是全局的。

全局變量（和函數）通常被認爲是不好的做法，內聯事件處理程序也是如此。

嘗試：

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

然後，裏面function append，只是指this.value。

來源

2017-04-19 18:04:49

爲什麼我的JavaScript代碼在jsfiddle上顯示不同的行爲？

回答

相關問題