javascript - 在 Code.org HTML Web Lab 中，当 Javascript 变量达到某个数字时，如何为它着色？

Question

我正在通过 Code.org Web Lab 创建一个网站，我在标签中有一个变量，一旦它达到 100，我想重新着色。我应该使用什么代码，在 HTML 或 Javascript 部分页面，实现这个？

这对我来说是一个新概念，将 Javascript 添加到 HTML，所以我在 Google 和 Stack Overflow 上查找了答案。每个结果都只是谈到为段落中的某些单词着色，或者在 javascript 变量中保存颜色。

这是页面中包含相关变量的 Javascript:

<script>
      function clickCounter() {
        if (typeof(Storage) !== "undefined") {
          if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
          } else {
            localStorage.clickcount = 1;
          }
          document.getElementById("result").innerHTML = "People have attempted but failed to help me " + localStorage.clickcount + " times.";
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support helping me.";
        }
      }
    </script>

下面是与点击变量关联的 HTML:

<p><button onclick="clickCounter()" type="button"><b>HELP ME</b></button></p>
    <div id="result"></div>

代码本身运行良好，但我不知道如何在点击次数达到 100 次后为其着色。如果有人能帮助我，我将不胜感激。

Answer 1

考虑到您没有添加要更改颜色的元素，我将添加一个 <p>在这里。

您可以使用 .style.color 更改元素的文本颜色. 大多数 CSS 样式可以用 HTMLElement.style 修改.

样式适用于 1 个 HTML 元素以及该特定元素内的所有内容，如果您将颜色应用到 <div id="result"></div> , 整个东西的颜色都会改变。

要解决此问题，您必须更改 HTML，以便您可以定位要更改的特定部分。在这里，我包装了localStorage.clickcount与 <span id="recolor"></span> .

然后，您可以定位 recolor并在 localStorage.clickcount >= 100 时更改其颜色.

<script>
function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "People have attempted but failed to help me <span id='recolor'>" + localStorage.clickcount + "</span> times.";

    if (localStorage.clickcount >= 100) {
      document.getElementById("recolor").style.color = "blue";
    }
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support helping me.";
  }
}
</script>


<p><button onclick="clickCounter()" type="button"><b>HELP ME</b></button></p>
<div id="result"></div>