Question

正如标题中提到的那样。一旦满足大于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>

Answer 1

首先，你需要为每个td添加一个id为“green”的id。我们假设我们将<td class="green" onclick="A()"></td>更改为<td class="green" onclick="A()" id="a_click_target"></td>

然后，我们可以像这样更新函数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");
    }
};

如果满足特定的点击次数，如何更改单元格的颜色？

1 个答案: