按钮单击更改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>
当我选择的按钮,没有任何反应。我做错了什么,我该如何解决?
我的答案起初可能看起来很复杂,但我确实认为从一个好的概念开始是健康的,会让事情变得更愉快。学习工具的一个常见问题实际上是他们将自己提升为“快速”学习方式。你可以从他们身上获得一些好处,但是有一些警告。如果跳过太多步骤,学习会更困难。
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
时,请明确说明你的意图。这实际上使你很清楚你打算如何处理你的按钮。
我希望这有助于和好运:)
的问题是,你破坏了,因为引号的字符串:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button>
</body>
</html>
通知我改变了双引号为单引号
什么时候你应该使用双引号和单引号? – Jessica
实际上并不重要,但是当你用任何引号启动一个字符串时,你不能让字符串中的值包含引号,除非你用\或字符串中断来转义。想一想,如果你在那个字符串里面使用'“'',那么一旦你用'''开始了一个字符串,那么你基本上就完成了那个字符串。为了避免它的字符串的内容应该使用不同于引号开始/结束字符串 – Saar
您可以查看[this](http://*.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
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>
这样一来,对一个事实,即你的代码更易于阅读上面,你会避免双引号/单报价问题你有。
在Firefox中,右键 - >检查元素显示'尝试一下'。 –