Проблема
У меня есть таблица с 2 строками и 3 столбцами, в третьем столбце отображаются результаты.
Моя цель - заставить код отображать 25% в первомстрока if (разница между x и y больше 3, но меньше 11).
И отображение 25% во втором ряду if (w + z > 3)
- это истина, а отображение 20% if (w + y = 3)
- это истина.
Как мне решить эту проблему?
Попытка
<!DOCTYPE html>
<html>
</head>
<BODY>
<script>
document.addEventListener("change", function() {
var x = document.getElementById("hp").value,
y = document.getElementById("ap").value,
w = document.getElementById("hc").value,
z = document.getElementById("ac").value,
text;
if (x - y > 3 && y - x < 11) {
text = "<span class='green'>25%</span>";
} else if (y - x > 3 && x - y < 11) {
text = "<span class='green'>25%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("pr").innerHTML = text;
if (w + z > 3) {
text = "<span class='green'>25%</span>";
} else if (w + z = 3) {
text = "<span class='green'>20%</span>";
} else {
text = "<span class='red'>10%</span>";
}
document.getElementById("cr").innerHTML = text;
})
</script>
<style>
.green {
color: green;
}
.red {
color: red;
}
.yellow {
color: yellow
</style>
<TABLE align="center" BORDER="1" WIDTH="" CELLPADDING="4" CELLSPACING="3">
<TR>
<TD id="">
<p>HOMEPOSITION:</p>
<input type="number" id="hp">
</TD>
<TD id="">
<p>AWAYPOSITION:</p>
<input type="number" id="ap">
</TD>
<TD id="pr"></TD>
</TR>
<TR>
<TD id="">
<p>HOMECAST:</p>
<input type="number" id="hc">
</TD>
<TD type="number" id="">
<p>AWAYCAST:</p>
<input type="number" id="ac">
</TD>
<TD id="cr"></TD>
</TR>
</TABLE>
</html>