我最近开始学习Javascript，到目前为止一直都很棒，但是我的练习陷入困境。
当我选择<select>中的颜色但我得到相同的错误时，我正在尝试更改表单标签的颜色。
我确定这是一个新手错误，但你们都可以帮助我吗？
function changeBackground(x){
var body = document.getElementById('body');
body.style.backgroundColor = x.value;
if (x.value == red) {
document.getElementsByTagName('label').style.color = 'grey';
} else if (x.value == blue) {
document.getElementsByTagName('label').style.color = 'white';
} else if (x.value == green) {
document.getElementsByTagName('label').style.color = 'yellow';
}
}<body id="body">
<div class="header">
<h1 id="heading">Learning Javascript</h1>
</div>
<form method="post" action="something.php" name="myForm">
<div>
<label>First Name</label>
<input type="text" name="firstName" id="
firstName">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<br>
<div>
<label>Background</label>
<select name="background" id="background" onchange="changeBackground(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<br>
<input type="submit" name="Submit">
</form>
答案 0 :(得分：2)
如果您想要更改所有label颜色，则必须循环显示每个颜色，因为getElementsByTagName会返回标记的数组（实时集合）。
此外，您的错误是因为您输入错误的if语句，与变量相比，而不是字符串，（例如red而不是"red"）
function changeBackground(x){
var body = document.getElementById('body');
body.style.backgroundColor = x.value;
var labels = document.getElementsByTagName('label');
var color;
if (x.value == 'red') {
color = 'grey';
} else if (x.value == 'blue') {
color = 'white';
} else if (x.value == 'green') {
color = 'yellow';
}
for (var i = 0 ; i < labels.length; i++){
var lbl = labels[i];
lbl.style.color = color;
}
}<body id="body">
<div class="header">
<h1 id="heading">Learning Javascript</h1>
</div>
<form method="post" action="something.php" name="myForm">
<div>
<label>First Name</label>
<input type="text" name="firstName" id="
firstName">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<br>
<div>
<label>Background</label>
<select name="background" id="background" onchange="changeBackground(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<br>
<input type="submit" name="Submit">
</form>
答案 1 :(得分：1)
x返回document.getElementsByTagName('label')类似于对象的数组，并且没有名称为HTMLCollection的属性。
因此对于style，属性document.getElementsByTagName('label').style.color = 'grey';为style。
答案 2 :(得分：1)
这里最初有两件事情是错误的：
引用您的颜色名称文字，例如x.value == "red"
document.getElementsByTagName('label')返回节点列表，因此需要[0]
如果您需要更改所有label的颜色，则需要循环显示它们。
function changeBackground(x) {
var body = document.getElementById('body');
body.style.backgroundColor = x.value;
var color, labels = document.getElementsByTagName('label');
if (x.value == "red") {
color = 'grey';
} else if (x.value == "blue") {
color = 'white';
} else if (x.value == "green") {
color = 'yellow';
}
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = color;
}
}<body id="body">
<div class="header">
<h1 id="heading">Learning Javascript</h1>
</div>
<form method="post" action="something.php" name="myForm">
<div>
<label>First Name</label>
<input type="text" name="firstName" id="
firstName">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<br>
<div>
<label>Background</label>
<select name="background" id="background" onchange="changeBackground(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<br>
<input type="submit" name="Submit">
</form>
但是，不建议更改内联样式，而是使用类，如此
function changeBackground(x) {
document.getElementById('body').className = x.value;
}body.red {
background-color: red;
}
body.blue {
background-color: blue;
}
body.green {
background-color: green;
}
body.red label {
color: gray;
}
body.blue label {
color: white;
}
body.green label {
color: yellow;
}<body id="body">
<div class="header">
<h1 id="heading">Learning Javascript</h1>
</div>
<form method="post" action="something.php" name="myForm">
<div>
<label>First Name</label>
<input type="text" name="firstName" id="
firstName">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<br>
<div>
<label>Background</label>
<select name="background" id="background" onchange="changeBackground(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<br>
<input type="submit" name="Submit">
</form>
答案 3 :(得分：0)
这里有两个问题：
if statement中的颜色与此字符串进行比较："red" getElementsByTagName()会返回类似数组的live HTMLCollection，因此您需要使用循环将样式应用于所有类型，或针对特定类似的目标：document.getElementsByTagName('label')[0]
function changeBackground(x) {
var labels = document.getElementsByTagName('label');
var body = document.getElementById('body');
body.style.backgroundColor = x.value;
if (x.value == "red") {
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = 'grey';
}
} else if (x.value == "blue") {
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = 'white';
}
} else if (x.value == "green") {
for (var i = 0; i < labels.length; i++) {
labels[i].style.color = 'yellow';
}
}
}<body id="body">
<div class="header">
<h1 id="heading">Learning Javascript</h1>
</div>
<form method="post" action="something.php" name="myForm">
<div>
<label>First Name</label>
<input type="text" name="firstName" id="
firstName">
</div>
<br>
<div>
<label>Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<br>
<div>
<label>Background</label>
<select name="background" id="background" onchange="changeBackground(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
<br>
<input type="submit" name="Submit">
</form>