我已经为我的学校制作了这个Formative Assessments Tracker,如果单元格的背景颜色如果相同则为绿色,如果它们不相同则为红色,则所需的数量为基础。
它是功能性的,但它只影响第一个细胞。我想知道我是否必须让id变得不同,或者是否有办法以更短,更不忙的方式做到这一点,以便只需点击一下按钮就可以影响所有细胞。
<html>
<head>
<title>Formative Assessments Tracker</title>
</head>
<body>
<style>
body {
font-family: helvetica;
font-size: 20px;
padding: 40px;
text-align: center;
}
td {
padding: 20px;
text-align: center;
}
.green {
background-color: green;
padding: 10px;
text-align: center;
}
.gray {
background-color: gray;
padding: 50px;
text-align: center;
}
.red {
background-color: red;
padding: 10px;
text-align: center;
}
.white {
background-color: white;
padding: 10px;
text-align: center;
}
</style>
<body>
<h3>HIGH SCHOOL</h3>
<h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
<input type="text" id="required">
<button onclick="submission()">Submit</button>
<script>
function submission() {
var r = document.getElementById("required").value;
var s = document.getElementById("submitted").value;
if (r == s) {
document.getElementById('name').style.backgroundColor = "green";
} else {
document.getElementById('name').style.backgroundColor = "red";
}
}
</script>
<table border="1">
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
</tr>
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
</tr>
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" id="submitted">
</td>
</tr>
</table>
</body>
答案 0 :(得分:2)
我修改了您的代码以解决您的问题。
答案是肯定的,你应该为每个元素使用不同的ID。但是你可以使用类来实现&#39; group&#39;元素,然后使用 getElementsByClassName 等方法获取它们 我在你的代码中实现了类和方法getElementsByClassName,现在它正在工作。
这是你的代码:
<html>
<head>
<title>Formative Assessments Tracker</title>
<style>
body {
font-family: helvetica;
font-size: 20px;
padding: 40px;
text-align: center;
}
td {
padding: 20px;
text-align: center;
}
.green {
background-color: green;
padding: 10px;
text-align: center;
}
.gray {
background-color: gray;
padding: 50px;
text-align: center;
}
.red {
background-color: red;
padding: 10px;
text-align: center;
}
.white {
background-color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h3>HIGH SCHOOL</h3>
<h2>FORMATIVE ASSESSMENTS TRACKER</h2>
# of FAs that should have been submitted:
<input type="text" id="required">
<button onclick="submission()">Submit</button>
<script>
function submission() {
var r = document.getElementById("required").value;
var sElements = document.getElementsByClassName("submitted");
for (i = 0; i < sElements.length; i++) {
if(sElements[i].value == r){
sElements[i].style.backgroundColor = "green";
}else{
sElements[i].style.backgroundColor = "red";
}
}
}
</script>
<table border="1">
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
<tr>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
<td id="name" class="green">NAME</td>
</tr>
<tr>
<td class="gray" </td>
<td class="gray" </td>
<td class="gray" </td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
</table>
</body>
</html>
&#13;
答案 1 :(得分:1)
我想知道我是否必须使id不同
需要唯一身份证。
或者是否有办法以更短,更不忙的方式做到这一点
是强>
确保您的输入有共同点,然后使用以下任何一种(非详尽列表):
例如,将submitted
和name
的所有重复ID更改为类,然后使用getElementsByClassName
和循环或[].forEach.call
。
此外,<td class="gray"</td>
是无效的HTML。您需要另一个结束尖括号:<td class="gray"></td>
。
function submission () {
var r = document.getElementById('required').value,
s = document.getElementsByClassName('submitted'),
n = document.getElementsByClassName('name');
for (var i = 0; i < s.length; i++) {
if (r === s[i].value)
n[i].style.backgroundColor = 'green';
else
n[i].style.backgroundColor = 'red';
}
}
&#13;
body {
font-family: helvetica;
font-size: 20px;
padding: 40px;
text-align: center;
}
td {
padding: 20px;
text-align: center;
}
.green {
background-color: green;
padding: 10px;
text-align: center;
}
.gray {
background-color: gray;
padding: 50px;
text-align: center;
}
.red {
background-color: red;
padding: 10px;
text-align: center;
}
.white {
background-color: white;
padding: 10px;
text-align: center;
}
&#13;
<h3>HIGH SCHOOL</h3>
<h2>FORMATIVE ASSESSMENTS TRACKER</h2> # of FAs that should have been submitted:
<input type="text" id="required">
<button onclick="submission()">Submit</button>
<table border="1">
<tr>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
</tr>
<tr>
<td class="gray"></td>
<td class="gray"></td>
<td class="gray"></td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
<tr>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
</tr>
<tr>
<td class="gray"></td>
<td class="gray"></td>
<td class="gray"></td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
<tr>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
<td class="name green">NAME</td>
</tr>
<tr>
<td class="gray"></td>
<td class="gray"></td>
<td class="gray"></td>
</tr>
<tr>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
<td class="white"># of FAs Submitted:
<input type="text" class="submitted">
</td>
</tr>
</table>
&#13;
答案 2 :(得分:1)
尝试使用类名而不是id:
<script>
function submission(){
var r = document.getElementById("required").value;
var s = document.getElementById("submitted").value;
if (r==s){
document.getElementsByClassName('green').style.backgroundColor="green";
}
else{
document.getElementsByClassName('green').style.backgroundColor="red";
}
}
</script>