Javascript 单击按钮时更改innerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33203173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change innerHTML on button click
提问by Jessica
I'm learning Javascript, and I'm trying to change the text of an 'id' when the user clicks a button. Here's the code:
我正在学习 Javascript，并且我正在尝试在用户单击按钮时更改“id”的文本。这是代码：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById("demo").innerHTML = "Hey There"">Try it</button>
</body>
</html> When I select the button, nothing happens. What am I doing wrong, and how can I fix it?
当我选择按钮时，没有任何反应。我做错了什么，我该如何解决？
回答by Frederik.L
My answer will possibly look complicated at first, but I do believe that starting with a good conception is healthy and will make things more enjoyable. A common problem with learning tools actually is that they promote themselves as "QUICK" ways of learning something. There is some good you can get from them, but there is some caveats. It can be harder to learn if you skip too many steps.
我的答案一开始可能看起来很复杂，但我相信从一个好的概念开始是健康的，会让事情变得更有趣。学习工具的一个常见问题实际上是它们将自己宣传为学习某些东西的“快速”方式。你可以从他们那里得到一些好处，但有一些警告。如果跳过太多步骤，学习起来会更困难。
HTML is by design used to describe the presentation of the page, while JavaScript is by design used to interact with that page.
HTML 设计用于描述页面的呈现，而 JavaScript 设计用于与该页面交互。
Inline JavaScript is a bad practice and will often lead to issues like the one you're facing. Inline here means that you directly put interactive code inside the HTML presentation. If you do that, you will quickly find that this part of HTML becomes messy. Then, it will look hard to deal visually with delimiters since there is >, "and 'all at the same place.
内联 JavaScript 是一种不好的做法，通常会导致您面临的问题。这里的内联意味着您直接将交互式代码放入 HTML 演示文稿中。如果这样做，您会很快发现 HTML 的这一部分变得混乱。然后，由于存在>,"并且'都在同一个地方，因此很难在视觉上处理分隔符。
Another problem with inline javascript is that it mixes two concepts: interaction and presentation. HTML should be only used for presentation.
内联 javascript 的另一个问题是它混合了两个概念：交互和展示。HTML 应仅用于演示。
In that way, you could edit your code to make it look like this:
这样，您可以编辑代码使其看起来像这样：
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>
What it does is when the document loads, it will interactively associate an action to your button if JavaScript is enabled in the user's browser. If it's not, the page won't fail at all, it will be downgraded. In that sample, the presentation (html) is totally separated from the interaction (script). As a bonus, there is no more f*cks with double or single quotes.
它的作用是在文档加载时，如果在用户的浏览器中启用了 JavaScript，它将以交互方式将一个操作与您的按钮相关联。如果不是，页面根本不会失败，它将被降级。在该示例中，演示文稿 (html) 与交互（脚本）完全分离。作为奖励，没有更多的双引号或单引号。
For the script part, I personnally like to work it a little bit more so it is easier to use and read.
对于脚本部分，我个人喜欢多做一点，这样更容易使用和阅读。
Something like this:
像这样的东西：
JavaScript
JavaScript
_e('btn').onclick = function() {
_e('demo').innerHTML = 'Hey There';
}
function _e(id) {
return document.getElementById(id);
}
Or even better:
或者甚至更好：
JavaScript
JavaScript
_e('btn').addEventListener('click', function() {
_e('demo').innerHTML = 'Hey There';
}, false);
function _e(id) {
return document.getElementById(id);
}
The last version will explicitly state your intention to do something when you clickon your button. This actually makes it really clear what you intend to do with your button.
最新版本将明确说明您click在按下按钮时要做某事的意图 。这实际上使您非常清楚您打算用按钮做什么。
I hope this helps and good luck :)
我希望这个帮助能祝你好运 ：）
回答by Saar
The problem is that you are breaking the string because of the quotes:
问题是你因为引号而破坏了字符串：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button>
</body>
</html> notice I changed the double quotes to single quotes
注意我把双引号改成了单引号
回答by aagjalpankaj
-You are using double quote inside double quote. So it results in breaking of string like this. onclick="document.getElementById("its the first string and so on...
- 您在双引号内使用双引号。所以它会导致这样的字符串断裂。onclick= "document.getElementById("它是第一个字符串，依此类推...
-Either you can use single quote inside double quoteor double quote inside single quote.
- 您可以在双引号内使用单引号或在单引号内使用双引号。
here is the working code:
这是工作代码：
- First Approach(Using single quote inside double quote):
- 第一种方法（在双引号内使用单引号）：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button>
</body>
</html> - Second Approach(Using double quote inside single quote):
- 第二种方法（在单引号内使用双引号）：
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hey There"'>Try it</button>
</body>
</html> More about single and double quotes Read this
有关单引号和双引号的更多信息阅读此内容
回答by Edoardo L'Astorina
It's always better to have JavaScript execute in a separate function. Instead of inlining JS in the onclick attribute, try this approach:
让 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> That way, on top of the fact that your code is easier to read, you will avoid the double quote/single quote issue you had.
这样，除了您的代码更易于阅读之外，您还可以避免遇到的双引号/单引号问题。
