2

我正在通过 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>

这是与 click 变量关联的 HTML：

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

代码本身运行良好，但我不知道一旦点击 100 次后如何着色。如果有人可以帮助我，将不胜感激。

4

2 回答 2

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>
于 2019-04-02T01:23:46.857 回答
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>
于 2019-04-02T01:04:25.253 回答