无论我在下拉框中选择什么，它只在我按Enter时给出相同的字体

有什么问题?无论我选择"通过"还是"失败"，字体都是绿色的。或";Borderline"。我希望有人能帮我解决这个问题，这样每当我选择Pass时，我就会在列表中获得名称和绿色字体，Fail会给我名称和红色字体，而Borderline会给我名称和橙色字体，谢谢!

<html>
<body>
<form id="form">
Enter Student Name <input type="text" id="name">&nbsp;
Grade <select id="gradism">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="Borderline">Borderline</option>
</select>
&nbsp;<button type="button" id="enter" onclick="myFunction()">Enter</button>
</form>
<h1>Students</h1>
<ul id="list"></ul>
<script>
selected = document.getElementById("gradism").value
if (selected == "Pass") {
function myFunction() {
var text = "";
var userName = document.getElementById("name").value;
document.getElementById("list").style.color = "#00FF00";
var li = document.createElement("li");
var node = document.createTextNode(userName);
li.appendChild(node);
if (userName.trim().length > 0) {
document.getElementById("list").appendChild(li);
document.getElementById("form").reset()
}
}
}
else if (selected == "Fail") {
function myFunction() {
var text = "";
var userName = document.getElementById("name").value;
document.getElementById("list").style.color = "#FF0000";
var li = document.createElement("li");
var node = document.createTextNode(userName);
li.appendChild(node);
if (userName.trim().length > 0) {
document.getElementById("list").appendChild(li);
document.getElementById("form").reset()
}
}
}
else if (selected == "Borderline") {
function myFunction() {
var text = "";
var userName = document.getElementById("name").value;
document.getElementById("list").style.color = "#FFA500";
var li = document.createElement("li");
var node = document.createTextNode(userName);
li.appendChild(node);
if (userName.trim().length > 0) {
document.getElementById("list").appendChild(li);
document.getElementById("form").reset()
}
}
}
</script>
</body>
</html>```

你的代码失败的原因是:当页面加载你的逻辑得到评估。条件语句立即运行，页面决定使用哪个函数。它永远不会改变因为当页面加载

时它只计算一次当您想测试条件时，在单个函数中进行测试，而不是为每个结果创建多个函数。在这种情况下，这也意味着在函数运行之前我们不会测试下拉框的值。另外，由于要更改元素的样式，所以让我们使用类。更容易使用，更具可扩展性。我们可以简单地将下拉列表的值作为一个类直接传递给新元素li.classList.add(color.toLowerCase())

function myFunction() {
var text = "";
var userName = document.getElementById("name").value;
let color = document.getElementById("gradism").value
var li = document.createElement("li");
li.classList.add(color.toLowerCase())
var node = document.createTextNode(userName);
li.appendChild(node);
if (userName.trim().length > 0) {
document.getElementById("list").appendChild(li);
document.getElementById("form").reset()
}
}

.pass {
color: #00FF00;
}
.borderline {
color: #FFA500;
}
.fail {
color: #FF0000;
}

<form id="form">
Enter Student Name <input type="text" id="name">&nbsp; Grade
<select id="gradism">
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
<option value="Borderline">Borderline</option>
</select>
&nbsp;<button type="button" id="enter" onclick="myFunction()">Enter</button>
</form>
<h1>Students</h1>
<ul id="list"></ul>

相关内容

最新更新

热门标签：