Question

我是HTML和Javascript的新手，我决定尝试编写一个基本的购物车。

我有一个问题。为什么要这样：

    if(totalItems == 0)
{

  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   
}

改变这个：

<b id = "yourCartContains">0</b>

说“你的购物车不包含任何商品”而不是0？

该函数绝对有效，因为我已经尝试将函数切换为显示alert并且它没有任何问题 - 所以函数有效，但由于某种原因，该函数不会更改文本。

这是带警报的函数（我甚至将totalItems更改为0以证明正在调用函数）：

var totalItems = 0;
if(totalItems == 0)
{
  alert("Random Alert is called upon function being executed");
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
}

我正在调试chrome。

Answer 1

document.getElementByID().innerHTML绝对有效。

确保：

document指的是元素所在的文档（您不使用iframe等）。

在元素附加到DOM时调用该函数。

这doesn't work：

<script>document.getElementById('foo').innerHTML = 'bar';</script>
<b id="foo"></b>

这works：

<b id="foo"></b>
<script>document.getElementById('foo').innerHTML = 'bar';</script>

你的HTML有效。可能是无效标记不能让您的浏览器找到正确的元素。

无论如何，如果您正在使用chrome，那么您真的应该使用控制台进行调试，而不是使用＆＃34; alert＆＃34;。在Mac上按 F12 （在Windows / Linux上）或 Cmd + 选择 + I 。如果有任何错误，您应该在控制台选项卡中以红色显示它们。

如果没有错误，请执行以下操作：

if(totalItems == 0)
{
  console.log('el: ', document.getElementById('yourCartContains'));
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
}

并查看您的控制台告诉您的内容。（可能会有el: undefined）

Answer 2

<script type="text/javascript">
    var totalItems = 0;
    if(totalItems == 0)
    {document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";}
  </script>
<span id="yourCartContains" style="font-weight:bold"></span>

Answer 3

我对将文本用于innerHTML感到非常痛苦。由于我的文本包含很多动态元素（用于搜索选项列表的select2），因此我忘了在结尾加上引号。文本看起来不错，但是在某些情况下，innerHTML截断了“提交”按钮。分配给innerHTML的文本会自动转换为其他奇怪的结果。如果HTML语法不正确，则会在innerHTML中产生非常奇怪的字符串。问题是断断续续的，有些情况很好，有些不好。由于项目很大，所以我浪费了整夜的时间去争取bug。

我终于找到了一种使用W3验证器（https://validator.w3.org/nu）调试动态元素的方法。复制并粘贴到文件中，然后检查动态元素语法。有一些在线HTML检查器（https://www.freeformatter.com/html-validator.html）。

Answer 4

这对我有用。您是否在html之后加载了脚本？

<html>
    <head>


        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div><b id = "yourCartContains">0</b></div>


        <script>

           var totalItems = 0;
if(totalItems == 0)
{
  alert("Random Alert is called upon function being executed");
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
} 


        </script>
    </body>
</html>

getElementByID.innerHTML无法更改文本

4 个答案: