开发者问题收集

在输入中输入文本时改变元素的颜色？

2023-07-28
177
javascript html css html-input

我正在寻找一种方法来更改元素的样式（例如 <body> ），当在 <input> 中输入的不仅仅是文本，还有特定数字（如“5214”）或其他内容时。使用我当前的代码，会抛出 Uncaught TypeError：无法设置未定义的属性（设置“innerText”）。我该如何修复它？错误在第 3 行。我在 ADT 安全系统面板上看到了类似的内容，但使用的是 <input type="hidden"> 。还使用了 4 个 <span> 元素。

HTML CSS JS 

const inputField = document.getElementsByClassName("doSomething");

if(inputField[0].innerText = "5214") {
  document.getElementsByTagName("body").style.backgroundColor = "lime";
}
input {
  background-color: #ffffff;
}
<label>Numbers only:</label><input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />
<br>
<label>Numbers and decimal points only:</label>
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
2个回答

该代码中有许多问题需要解决。

  • 在您的 HTML 中，输入标签未指定类名，但您说它们属于 javascript 中的 doSomething 类。因此，目前没有 doSomething 类的元素，这就是 document.getElementsByClassName("doSomething") 返回 undefined 的原因。
  • 当 if 语句中的条件为 inputField[0].innerText = "5214" 时，您没有比较两个值以检查它们是否相等。您正在分配。 错误的运算符。 为了进行比较，您需要使用 == 。
  • 此外，要获取输入元素内的文本，您不能使用 innerText 属性，因为它们不像文本元素那样工作。相反，您需要使用 value 。
  • 执行 document.getElementsByTagName("body") 将返回一个数组，而不是您拥有的唯一 body 元素，因为您可能拥有多个。因此，假设您只有一个 body 标签，您可以执行 document.getElementsByTagName("body")[0] 。
  • 您必须在 keyup 之后检查输入的值，而不是 keypress ，因为该值在 keypress 之前不会改变。它只在 keyup 之前这样做。因此，您正在使用 keypress 检查前一个值，而不是当前值。因此，您必须使用 onkeyup 。
  • 顺便说一句，当您说 document.getElementsByTagName("body")[0].style 时，只要您只有一个 body 标签（您应该这样做），您就应该说 document.body.style 。显然，第二个比第一个更简单、更有意义。

这是最终有效的代码： 

const inputField = document.getElementsByClassName("doSomething");

function check() {
  if(inputField[0].value == "5214") {
    document.body.style.backgroundColor = "lime";
  } else {
    document.body.style.backgroundColor = "white";
  }
}
<label>Numbers only:</label>
<input class="doSomething" type="text" onkeyup="check()" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"/>
<br>
<label>Numbers and decimal points only:</label>
<input class="doSomething" type="text" onkeyup="check()"  onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"/>
Amolgorithm
2023-07-28

首先，您的输入和主体选择器中缺少类 doSomething 

document.getElementsByTagName("body").style.backgroundColor = "lime";

为其添加 [0] 索引，然后您的代码将成功运行...

如下面的代码所示。

Html 代码 

<label>Numbers only:</label>
    <input type="text" class="doSomething" onkeyup="changeColor()" />
    <br>
    <label>Numbers and decimal points only:</label>
    <input type="text" class="doSomething" onkeyup="changeColor()" />

Javascript 代码 

<script>
    const inputField = document.getElementsByClassName("doSomething");
    console.log(inputField[0])

    let changeColor = () => {
        if (inputField[0].value == "5214") {
            let body = document.getElementsByTagName("body")[0];
            body.style.backgroundColor = "lime";
        }
    }
</script>
Pravin Tidake
2023-07-28