擦除输入内容后，表单中的必填字段不会变为红色

Question

基本表单验证

在这个问题中，您要确保文本框不为空。完成以下步骤：

创建一个文本输入框。编写一个函数，如果文本框为空，则将文本框的边框变为红色。

（如果值为“”，则为空）。

如果值不为空，边框应该恢复正常。

当用户释放一个键 (onkeyup) 时，运行您刚刚创建的函数。

请在我编码错误的地方更正我的代码？

let form = document.getElementById("form_Text").value;

document.getElementById("form_Text").onfocus = function() {

  if (form == "") {

    document.getElementById("form_Text").style.backgroundColor = "red";

    document.getElementById("showText").innerHTML = "Form is empty";

  } else {}

  document.getElementById("form_Text").onkeyup = function() {

    document.getElementById("form_Text").style.backgroundColor = "white";

    document.getElementById("showText").innerHTML =

      "Form is not Empty, No red Background";

  };

};

Fill Your Form:

<input id="form_Text" type="text" />

<div id="showText"></div>

Answer 1

let form = document.getElementById("form_Text").value;您正试图在加载 js 后立即获取输入值。因此它永远是空的。您需要在事件侦听器中调用它。document.getElementById("form_Text").onfocus = function() {    let form = document.getElementById("form_Text").value;    ...}input但是，您可以使用event 而不是focusand ，而不是编写两个单独的事件侦听器keyup   const formText = document.getElementById("form_Text");const showText = document.getElementById("showText");formText.addEventListener('input', function(evt) {  const inputValue = evt.target.value;  if (inputValue == '') {    formText.style.backgroundColor = "red";    showText.innerHTML = "Form is empty";  } else {    formText.style.backgroundColor = "white";    showText.innerHTML = "Form is not Empty, No red Background";  }})Fill Your Form:<input id="form_Text" type="text" /><div id="showText"></div>更新您可以在下面找到其他绑定方式。您可以使用事件侦听器，而不是使用两个单独的事件（keyup和）。focusoninputconst formText = document.getElementById("form_Text");const showText = document.getElementById("showText");formText.oninput = function(evt) {  const inputValue = evt.target.value;  if (inputValue == '') {    formText.style.backgroundColor = "red";    showText.innerHTML = "Form is empty";  } else {    formText.style.backgroundColor = "white";    showText.innerHTML = "Form is not Empty, No red Background";  }}Fill Your Form:<input id="form_Text" type="text" /><div id="showText"></div>