為什么innerHTML無法使用空格？
[英]Why doesn't innerHTML work with white spaces?
問題描述
在下面的html中，前按鈕不響應，而后按鈕更改標記的內容。
<!DOCTYPE html> <html> <body> <p id ="para">Initial text. </p> <button onClick=document.getElementById('para').innerHTML="move front"> front </button> <button onClick=document.getElementById('para').innerHTML="back"> back </button> </body> </html>
在下面，兩個按鈕都更改了標簽的內容。
<!DOCTYPE html> <html> <body> <p id ="para">Initial text. </p> <button onClick=document.getElementById('para').innerHTML="movefront"> front </button> <button onClick=document.getElementById('para').innerHTML="back"> back </button> </body> </html>
為什么銀行空間會使按鈕無響應？
3 個解決方案
解決方案1
3 2016-09-11 09:34:03
那只是無效的HTML。
您必須在整個onclick屬性值周圍加上引號，否則它將在空格處結束。
onClick = document.getElementById('para').innerHTML="move // cut off here
front" // a second (meaningless) attribute for your button tag.
解決方案2
1 2016-09-11 09:48:01
如果使用此技術，則可能會遇到問題。
抱歉，但這不是將click事件附加到現代javascript中的元素的方式，至少在您要使用所謂的“良好做法”的情況下如此。
更好的方法是使用javascript將click事件附加到所需的元素。
我將給您一個簡短的代碼示例。
首先是HTML-我將使用您的原始HTML（稍作修改）：
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button id="frontBtn"> front </button>
<button id="backBtn"> back </button>
</body>
</html>
如您所見，我從按鈕中刪除了“ onclick”事件，並為每個按鈕分配了一個ID。
其次，我們將編寫一些javascript來將click事件正確地附加到每個按鈕上 ，當然要像您最初打算執行的那樣執行文本更改：
如果您熟悉jQuery，則可以這樣做：
$('#frontBtn').on('click',function(){
$('#para').html('move front');
});
$('#backBtn').on('click',function(){
$('#para').html('back');
});
這也可以使用香草（本機）javascript完成：
document.getElementById("frontBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "move front";
});
document.getElementById("backBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "back";
});
現在，我們為每個按鈕提供了結構良好的事件處理程序，可以輕松添加更多代碼。
至於在哪里插入您的JavaScript？
您可以使用html文檔頭中的腳本標簽將javascript添加到html文檔中，如下所示：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// your code here..
</script>
</head>
<body>
....
....
甚至更好-創建一個單獨的腳本文件，並將其加載到html頁面底部，如下所示：
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
....
....
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
這是使用javascript將事件附加到元素的更好方法。
想象一下，如果您嘗試編寫50-100行內聯代碼？ 不可能！ 但是使用事件處理程序功能，您可以輕松實現。
事情基本上會更好地工作，並且您的項目將更易於維護。
希望能有所幫助！
解決方案3
0 2016-09-11 11:39:41
請考慮以下語法：
<button onclick="document.getElementById('para').innerHTML='move front'">front</button>
為什么element.innerHTML =帶有日期信息的字符串不起作用？
[英]Why element.innerHTML = string with date info doesn't work?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.