在Code.org HTML网络实验室内,如何在Javascript变量达到特定数字时给数字着色?

时间:2019-04-02 00:39:00

标签: javascript html code.org

我正在通过Code.org网络实验室创建一个网站,并且标签中有一个变量,一旦其达到100,我想重新着色。我应该在HTML或Javascript部分使用什么代码页面,实现这一目标?

这对我来说是个新概念,它向HTML添加了Javascript,因此我在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>

这是与click变量关联的HTML:

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

代码本身可以完美运行,但是我不知道如何在达到100次点击后对其进行着色。如果有人可以帮助我,将不胜感激。

2 个答案:

答案 0 :(得分:1)

考虑到您没有添加要更改颜色的元素,我将在此处添加settings sync

您可以使用<p>更改元素的文本颜色。 大多数CSS样式都可以使用HTMLElement.style进行修改。

一种样式适用于1个HTML元素,并且该特定元素中的所有内容同样适用,因此,如果将颜色应用于.style.color,整个事物的颜色都会改变。

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

然后,您可以定位<span id="recolor"></span>并在recolor时更改其颜色。

localStorage.clickcount >= 100

答案 1 :(得分:0)

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