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

Question

我正在通过 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 次后为其着色。如果有人能帮助我，我将不胜感激。

Answer 1

您可以在 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>

Answer 2

考虑到你没有添加你想要改变颜色的元素，我准备在这里添加一个<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>

在 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?

javascript

html

code.org