为什么innerHTML无法使用空格？
[英]Why doesn't innerHTML work with white spaces?
问题描述
In the below html, the front button doesn't respond while the back button changes the content of the tag. 
在下面的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>
In the below, both the buttons change the content of the tag. 在下面，两个按钮都更改了标签的内容。
<!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>
Why does a bank space make a button unresponsive? 为什么银行空间会使按钮无响应？
3 个解决方案
解决方案1
3 2016-09-11 09:34:03
That is just invalid HTML. 那只是无效的HTML。
You have to put quotes around your whole onclick attribute value, otherwise it will end at the space. 您必须在整个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
You are probably having issues if you are using this technique. 如果使用此技术，则可能会遇到问题。
I am sorry but this is not how you attach a click event to elements in modern javascript, at least if you want to work with what's called "good practices". 抱歉，但这不是将click事件附加到现代javascript中的元素的方式，至少在您要使用所谓的“良好做法”的情况下如此。
The better method would be to attach a click event to a desired element using javascript. 更好的方法是使用javascript将click事件附加到所需的元素。
I will give you a short code example. 我将给您一个简短的代码示例。
First the HTML - I will use your original HTML (modified a bit): 首先是HTML-我将使用您的原始HTML（稍作修改）：
<!DOCTYPE html>
<html>
<body>
<p id ="para">Initial text. </p>
<button id="frontBtn"> front </button>
<button id="backBtn"> back </button>
</body>
</html>
As you can see, I have removed your "onclick" events from the buttons, and assigned an id to each button. 如您所见，我从按钮中删除了“ onclick”事件，并为每个按钮分配了一个ID。
Second, we will write some javascript to properly attach a click event to each one of the buttons , and of course execute the change of text as you originally was intending to do: 其次，我们将编写一些javascript来将click事件正确地附加到每个按钮上 ，当然要像您最初打算执行的那样执行文本更改：
if you are familiar with jQuery then this will do: 如果您熟悉jQuery，则可以这样做：
$('#frontBtn').on('click',function(){
$('#para').html('move front');
});
$('#backBtn').on('click',function(){
$('#para').html('back');
});
This can also be done with vanilla (native) javascript: 这也可以使用香草（本机）javascript完成：
document.getElementById("frontBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "move front";
});
document.getElementById("backBtn").addEventListener("click", function(){
document.getElementById("para").innerHTML = "back";
});
Now we have a nicely structured event handler for each button, more code can be easily added. 现在，我们为每个按钮提供了结构良好的事件处理程序，可以轻松添加更多代码。
As for where to insert your javascript ? 至于在哪里插入您的JavaScript？
You can add the javascript to your html document by using script tags in your html document head like this: 您可以使用html文档头中的脚本标签将javascript添加到html文档中，如下所示：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// your code here..
</script>
</head>
<body>
....
....
Or even better - create a separate script file and load it at the bottom of your html page like this: 甚至更好-创建一个单独的脚本文件，并将其加载到html页面底部，如下所示：
<!DOCTYPE html>
<html>
<head>
....
</head>
<body>
....
....
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
This is the better way to attach events to elements, using javascript. 这是使用javascript将事件附加到元素的更好方法。
Imagine if you try to write 50-100 lines of code inline ? 想象一下，如果您尝试编写50-100行内联代码？ impossible! 不可能！ but with an event handler function you can do it easily. 但是使用事件处理程序功能，您可以轻松实现。
Things will basically work better and your project will be much easier for you to maintain. 事情基本上会更好地工作，并且您的项目将更易于维护。
Hope it helps a bit! 希望能有所帮助！
解决方案3
0 2016-09-11 11:39:41
请考虑以下语法：
<button onclick="document.getElementById('para').innerHTML='move front'">front</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.