Question

我正在学习Javascript，而且我正在尝试更改“ID”的文字。当用户点击按钮时。这是代码：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById("demo").innerHTML = "Hey There"">Try it</button>

</body>
</html>

＆＃13;

当我选择按钮时，没有任何反应。我做错了什么，我该如何解决？

Answer 1

我的答案一开始可能看起来很复杂，但我相信从一个好的概念开始是健康的，会让事情变得更加愉快。学习工具的一个常见问题实际上是他们将自己宣传为“快速”学习某种东西的方式。你可以从中获得一些好处，但有一些警告。如果你跳过太多步骤，可能会更难学习。

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）与交互（脚本）完全分开。作为奖励，没有更多带有双引号或单引号的f * cks。

对于脚本部分，我个人喜欢更多地使用它，因此更容易使用和阅读。

这样的事情：

<强>的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时执行某些操作的意图。这实际上非常清楚你打算用你的按钮做什么。

我希望这会有所帮助并祝你好运：）

Answer 2

问题在于你因为引号而打破了字符串：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button>

</body>
</html>

＆＃13;

注意我将双引号更改为单引号

Answer 3

- 您在双引号内使用双引号。所以它导致这样的字符串断开。 onclick = ＆＃34; document.getElementById（＆＃34; 是第一个字符串，依此类推......

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

这是工作代码：

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

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hey There'">Try it</button>

</body>
</html>

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hey There"'>Try it</button>

</body>
</html>

＆＃13;

有关单引号和双引号的更多信息Read this

Answer 4

让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>

这样，除了您的代码更容易阅读之外，您将避免使用双引号/单引号问题。

按钮点击更改innerHTML

4 个答案: