我正在通过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次点击后对其进行着色。如果有人可以帮助我,将不胜感激。
答案 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>