Javascript 单击按钮更改innerHTML_Javascript

Javascript 单击按钮更改innerHTML

javascript

Javascript 单击按钮更改innerHTML,javascript,Javascript,我正在学习Javascript，我试图在用户单击按钮时更改“id”的文本。代码如下：您好试试看问题是，由于引号，您正在断开字符串：您好试试看 -您正在双引号内使用双引号。所以它会导致像这样的绳子断裂。 onclick=“document.getElementById（“是第一个字符串，依此类推…” -您可以在双引号内使用单引号或在单引号内使用双引号以下是工作代码：第一种方法（在双引号内使用单引号）：您好试试看让JavaScript在单独的函数中执行总是比较好的。与

我正在学习Javascript，我试图在用户单击按钮时更改“id”的文本。代码如下：


您好
试试看

问题是，由于引号，您正在断开字符串：


您好
试试看

-您正在双引号内使用双引号。所以它会导致像这样的绳子断裂。 onclick=“document.getElementById（“是第一个字符串，依此类推…”

-您可以在双引号内使用单引号或在单引号内使用双引号

以下是工作代码：

第一种方法（在双引号内使用单引号）：


您好
试试看

让JavaScript在单独的函数中执行总是比较好的。与其在onclick属性中内联JS，不如尝试以下方法：


您好
试试看
var textChange=函数（）{
document.getElementById（“demo”）.innerHTML=“你好”；
};

我的答案一开始可能看起来很复杂，但我确实相信，从一个好的概念开始是健康的，会让事情变得更有趣。学习工具的一个常见问题实际上是它们自我宣传“快”学习东西的方法。你可以从中得到一些好处，但也有一些注意事项。如果你跳过太多的步骤，学习起来会更困难

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

_e('btn').onclick = function() {
    _e('demo').innerHTML = 'Hey There';
}

function _e(id) {
   return document.getElementById(id);
}

_e('btn').addEventListener('click', function() {
    _e('demo').innerHTML = 'Hey There';
}, false);

function _e(id) {
   return document.getElementById(id);
}

最后一个版本将明确说明当您在按钮上单击

时要执行的操作。这实际上明确了您打算使用按钮执行的操作
我希望这有帮助，祝你好运：）
在Firefox中，右键单击->检查元素显示<代码>试试它。

什么时候应该使用双引号和单引号？实际上这并不重要，但是当你用任何引号开始一个字符串时，你不能允许字符串中的值包含引号，除非你用\转义，否则字符串会断开。想想这个事实t如果在字符串中使用

“

然后您基本上完成了该字符串。为了避免这种情况，字符串的内容应该使用不同于字符串开头/结尾的引号的引号。有关JavaScript中单引号/双引号用法的更多信息，请查看问题和答案。不过，这取决于你，它们最终只是建议。