时间戳

首页 > 解决方案 > 无论我在下拉框中选择什么，只要我按 Enter，它只会给出相同的字体

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

问题描述

问题是什么？无论我选择“通过”、“失败”还是“边界线”，我都会不断获得绿色字体。我希望有人能帮我解决这个问题，这样每当我选择 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>```

标签： javascripthtml

解决方案

您的代码失败的原因是：当页面加载时，您的逻辑会被评估。立即您的条件运行和页面决定它将使用哪些功能。它永远不会改变，因为它在页面加载时都会评估一次

当您想要测试条件时，请在单个函数中进行，而不是为每个结果创建多个函数。在这种情况下，这也意味着我们不会测试下拉的值，直到函数运行。此外，由于您正在更改元素的样式，因此让我们使用类。更易于使用且更具可扩展性。我们可以简单地将下拉列表的值作为一个类直接传递给新元素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>

推荐阅读