Javascript 如果满足某个单击值，如何更改单元格的颜色？_Javascript

Javascript 如果满足某个单击值，如何更改单元格的颜色？

javascript

Javascript 如果满足某个单击值，如何更改单元格的颜色？,javascript,Javascript,正如标题中提到的。我需要找到一种方法，一旦满足任何大于4次单击的值，就将颜色从绿色更改为红色。我曾多次尝试研究，但我试图将代码混搭在一起，这样就无法正常工作。因此，我只是放置了原始代码。我只是需要找到正确的代码来使用，我是一个学生，所以我真的没有太多的编码知识。感谢您花时间阅读本文 <html> <head> <title>SA1</title> <style type="text/css"> body { text-align:c

正如标题中提到的。我需要找到一种方法，一旦满足任何大于4次单击的值，就将颜色从绿色更改为红色。我曾多次尝试研究，但我试图将代码混搭在一起，这样就无法正常工作。因此，我只是放置了原始代码。我只是需要找到正确的代码来使用，我是一个学生，所以我真的没有太多的编码知识。感谢您花时间阅读本文

<html>
<head>
<title>SA1</title>

<style type="text/css">

body
{
text-align:center;
font-family:Arial;
font-size:20px;
padding:40px;

}

th{
color:black;
background-color:grey;
text-align:center;
padding:25px;

}

.green
{
 background-color:green;
 padding:50px;
 text-align:center;
 height: 50px;
}

.red
{
 background-color:red;
 padding:50px;
 text-align:center;
 height: 50px;
}


td{
 padding:20px;

}

.h{
color:white;
background-color:black;
text-align:center;
padding:25px;
}

</style>
</head>
<body>


<script type="text/javascript">

    var p = prompt("Password is password")
     if (p !== "password"){
     document.getElementById("nope").innerHTML = ("<h1>Access Denied. Try     Adding Hours.</h1>");
}

var a = 0;
function A() {
    a += 1;
    document.getElementById("a").innerHTML = a;
};

var b = 0;
function B() {
    b += 1;
    document.getElementById("b").innerHTML = b;
};

var c = 0;
function C() {
    c += 1;
    document.getElementById("c").innerHTML = c;
};

function E(){
    var e = document.getElementById("e").value;
    document.getElementById("E").innerHTML = e
}

function F(){
    var f = document.getElementById("f").value;
    document.getElementById("F").innerHTML = f
}

function G(){
    var g = document.getElementById("g").value;
    document.getElementById("G").innerHTML = g
}

function save() {
  var date = new Date();
  var n = date.toDateString();
  var time = date.toLocaleTimeString();
  document.getElementById('time').innerHTML = n + ' ' + time
}

</script>

<h3 id="nope">GreenSlip Counter</h3>
<p id ="time"></p>
<p id= "nope"><button onclick="save()">Save</button></p>


<hr>

<table border="1">
<tr>
<th id="E"><input type="text" id="e">
<button onclick="E()">Name</button>
</th>
<th id="F"><input type="text" id="f">
<button onclick="F()">Name</button>
</th>
<th id="G"><input type="text" id="g">
<button onclick="G()">Name</button>
</th>

</tr>
<tr>
<td class="green" onclick="A()"></td>
<td class="green" onclick="B()"></td>
<td class="green" onclick="C()"></td>
</tr>
<tr class="h">
<td>Hours: <a id="a">0</a></td>
<td>Hours: <a id="b">0</a></td>
<td>Hours: <a id="c">0</a></td>
</tr>

</table>



</body>
</html>


SA1
身体
{
文本对齐：居中；
字体系列：Arial；
字体大小：20px；
填充：40px；
}
th{
颜色：黑色；
背景颜色：灰色；
文本对齐：居中；
填充：25px；
}
绿色
{
背景颜色：绿色；
填充：50px；
文本对齐：居中；
高度：50px；
}
红色
{
背景色：红色；
填充：50px；
文本对齐：居中；
高度：50px；
}
运输署{
填充：20px；
}
h{
颜色：白色；
背景色：黑色；
文本对齐：居中；
填充：25px；
}
var p=提示（“密码即密码”）
如果（p！=“密码”）{
document.getElementById（“nope”）.innerHTML=（“访问被拒绝。尝试添加小时数”）；
}
var a=0；
函数A（）{
a+=1；
document.getElementById（“a”）.innerHTML=a；
};
var b=0；
函数B（）{
b+=1；
document.getElementById（“b”）.innerHTML=b；
};
var c=0；
函数C（）{
c+=1；
document.getElementById（“c”）.innerHTML=c；
};
函数E（）{
var e=document.getElementById（“e”）.value；
document.getElementById（“E”）.innerHTML=E
}
函数F（）{
var f=document.getElementById（“f”）.value；
document.getElementById（“F”）.innerHTML=F
}
函数G（）{
var g=document.getElementById（“g”）.value；
document.getElementById（“G”）.innerHTML=G
}
函数save（）{
变量日期=新日期（）；
var n=date.toDateString（）；
var time=date.toLocaleTimeString（）；
document.getElementById（'time'）。innerHTML=n+''+time
}
绿滑计数器

保存

名称
名称
名称
小时：0
小时：0
小时：0

首先，您需要为每个td添加一个id，该id的类别为“绿色”。假设我们将changed

添加到

然后，我们可以像这样更新函数A、B和C：

function A() {
    a += 1;
    document.getElementById("a").innerHTML = a;
    if (a >= 4){
       document.getElementById("a_click_target").classList.remove("green");
       document.getElementById("a_click_target").classList.add("red");
    }
};

你应该展示你已经尝试过的，并且只发布理解问题所需的最低代码。你看起来很好地跟踪了点击次数。现在，您只需要了解如果满足条件，如何设置类

。