为什么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.