在 Code.org HTML 网络实验室中,当 Javascript 变量达到某个数字时,我如何为它着色?

How do I colour a number from a Javascript variable when it hits a certain number, within the Code.org HTML Web Lab?

我正在通过 Code.org 网络实验室创建一个网站,我在标签中有一个变量,一旦它达到 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 次后为其着色。如果有人能帮助我,我将不胜感激。

您可以在 javascript 代码中维护一个全局计数变量。 当您单击按钮时,将其增加 1。 当计数等于 100 时改变结果的颜色

<script>
function clickCounter() {
    if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
        localStorage.clickcount = Number(localStorage.clickcount)+1;
        if(localStorage.clickcount == 100){
           document.getElementById("result").style.color = "red";
           localStorage.clickcount = 0;
        }
    } 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>

考虑到你没有添加你想要改变颜色的元素,我准备在这里添加一个<p>

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

修改

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

要解决这个问题,您必须更改 HTML 以便您可以针对要更改的特定部分。在这里,我用 <span id="recolor"></span>.

包装了 localStorage.clickcount

然后,您可以定位 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>