按鈕單擊更改innerHTML

我正在學習Javascript，並且我試圖在用戶單擊按鈕時更改「id」的文本。下面的代碼：按鈕單擊更改innerHTML

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById("demo").innerHTML = "Hey There"">Try it</button> 
 

 
</body> 
 
</html>

當我選擇的按鈕，沒有任何反應。我做錯了什麼，我該如何解決？

來源

2015-10-18 Jessica

在Firefox中，右鍵 - >檢查元素顯示'<按鈕類型= 「按鈕」的onclick = 「的document.getElementById（」演示「）。innerHTML的=」嘿有「」=「」>嘗試一下'。 –

我的答案起初可能看起來很複雜，但我確實認爲從一個好的概念開始是健康的，會讓事情變得更愉快。學習工具的一個常見問題實際上是他們將自己提升爲「快速」學習方式。你可以從他們身上獲得一些好處，但是有一些警告。如果跳過太多步驟，學習會更困難。

HTML在設計上用於描述頁面的表示，而JavaScript則是用於與該頁面交互的設計。

內聯JavaScript是一種不好的做法，通常會導致您遇到的問題。這裏內聯意味着你直接把交互式代碼放在HTML演示文稿中。如果你這樣做，你很快就會發現這部分HTML變得混亂。然後，由於>,"和'都在相同的地方，所以看起來很難直觀地處理分隔符。

內聯javascript的另一個問題是它混合了兩個概念：交互和表示。 HTML應該只用於演示。

這樣一來，你可以編輯代碼，使它看起來像這樣：

HTML

<!DOCTYPE html> 
<html> 
<body> 

    <p id="demo">Hello</p> 
    <button id="btn" type="button">Try it</button> 

    <script> 
     document.getElementById('btn').onclick = function() { 
      document.getElementById('demo').innerHTML = 'Hey There'; 
     } 
    </script> 
</body> 
</html>

它什麼時候該文件加載時，它會以交互方式的操作關聯您的按鈕，如果在用戶的瀏覽器中啓用了JavaScript。如果不是，頁面不會失敗，它會被降級。在該示例中，演示文稿（html）與交互（腳本）完全分離。作爲獎勵，沒有更多的雙引號或單引號。

對於腳本部分，我個人喜歡使用它多一點，所以它更容易使用和閱讀。

事情是這樣的：

的JavaScript

_e('btn').onclick = function() { 
    _e('demo').innerHTML = 'Hey There'; 
} 

function _e(id) { 
    return document.getElementById(id); 
}

甚至更好：

的JavaScript

_e('btn').addEventListener('click', function() { 
    _e('demo').innerHTML = 'Hey There'; 
}, false); 

function _e(id) { 
    return document.getElementById(id); 
}

的最後一個版本都會電子在你的按鈕上當你click時，請明確說明你的意圖。這實際上使你很清楚你打算如何處理你的按鈕。

我希望這有助於和好運:)

來源

2015-10-18 21:25:41

的問題是，你破壞了，因爲引號的字符串：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button> 
 

 
</body> 
 
</html>

通知我改變了雙引號爲單引號

來源

2015-10-18 20:58:54 Saar

什麼時候你應該使用雙引號和單引號？ – Jessica

實際上並不重要，但是當你用任何引號啓動一個字符串時，你不能讓字符串中的值包含引號，除非你用\或字符串中斷來轉義。想一想，如果你在那個字符串裏面使用'「''，那麼一旦你用'''開始了一個字符串，那麼你基本上就完成了那個字符串。爲了避免它的字符串的內容應該使用不同於引號開始/結束字符串 – Saar

您可以查看[this]（http://stackoverflow.com/questions/242813/when-to-使用雙或單引號在JavaScript）問題和答案更多關於單/雙引號用法在JavaScript中。這取決於你，他們只是最後的建議。 –

- 您使用雙引號裏面的雙引號。所以它會導致像這樣破壞字符串。的onclick = 「的document.getElementById（」其第一串等等...

- 或者你可以使用單引號雙引號內或雙引號單引號內。

這裏是工作代碼：

第一種方法（使用雙引號內的單引號）：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button> 
 

 
</body> 
 
</html>

第二種方法（使用單引號內雙引號）：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hey There"'>Try it</button> 
 

 
</body> 
 
</html>

關於單引號和雙引號的更多信息Read this

來源

2015-10-18 21:04:40 Aviator

JavaScript在單獨的函數中執行總是更好。相反，在onclick屬性內聯JS的，試試這個方法：

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p id="demo">Hello</p> 
 
<button type="button" onclick="textChange()">Try it</button> 
 

 
    <script> 
 
    var textChange = function() { 
 
     document.getElementById("demo").innerHTML = "Hey There"; 
 
    }; 
 
    </script> 
 
</body> 
 
</html>

這樣一來，對一個事實，即你的代碼更易於閱讀上面，你會避免雙引號/單報價問題你有。

來源

2015-10-18 21:05:31

按鈕單擊更改innerHTML

回答

相關問題