Как изменить цвет ячейки, если определенное количество кликов выполнено?

Хорошо, как указано в названии. Мне нужно найти способ изменить цвет от зеленого до красного, как только будет достигнуто значение, превышающее 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>

источник

2016-02-26 Pao

Вы должны показать, что вы пробовали, и размещать только минимальный код, необходимый для понимания проблема. – tucuxi

Вы выглядите так, что хорошо отслеживаете количество кликов. Теперь вам просто нужно выяснить, как установить класс 'if' условие. – krillgar

Сначала вам нужно добавить идентификатор к каждому из td с классом «зеленый». Давайте предположим, что мы добавили изменили <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"); 
    } 
};

источник

2016-02-26 14:58:31

Как изменить цвет ячейки, если определенное количество кликов выполнено?

ответ

Смежные вопросы