根据条件切换输入元素的背景颜色答案

【问题标题】：Toggle the background colour of an input element based on a condition根据条件切换输入元素的背景颜色
【发布时间】：2022-08-13 21:56:13
【问题描述】：

我试图使输入标签的边框颜色仅在输入为零时变为红色

    if(individual.value <= 1) {
        error.style.display = \'block\'
        individual.style.borderColor = \'red\'
    } else if(individual.value >= 1){
        error.style.display = \'none\'
        individual.style.borderColor = \'hsl(172, 67%, 45%)\'
    }
}````

请向我们展示您的输入元素。它是什么类型的？
我猜if ... else 就足够了，不需要else if
另外，individual.value <= 1 和individual.value >= 1 有点不合逻辑，如果值为 1，则将其视为“错误”。我认为应该是individual.value < 1 和individual.value >= 1
就您提供的代码而言，它可以正常工作（就它而言，请参阅@GrafiCode 评论），因此您周围的 HTML 或 JS 存在一些问题。查看您的浏览器 devtools 检查设施控制台以确保您没有 JS 错误。
tbh 这个脚本在很多地方可能会失败，我的回答应该涵盖这些点。一次它不检查输入的变化。下一个主要问题是，如果您在输入字段中键入，输入将返回一个字符串而不是整数。因此，除非您使用 + 或 parseInt 将字符串转换为整数，否则第一条语句将始终为真

标签： javascript html css

【解决方案1】：

首先你需要一个 EventListener 来监听输入变化：inputElement.addEventListener
您需要将输入的值作为整数获取：+inputElement.value
之后您需要一个if/else-语句或条件三元运算符
使用 classList 通过添加/删除类来应用更改：

let ele = document.querySelector('input');

ele.addEventListener('change', function() {
  let val = +ele.value;
  if (val <= 1) {
    ele.classList.add('error');
  } else {
    ele.classList.remove('error');
  }
})

.error {
  border: 1px solid red;
}

&lt;input type="number step="1""&gt;

【讨论】：

【解决方案2】：

我创建了两个数字类型的输入字段。创建一个通用处理程序，例如 handleNumberInput(e) 监听 input 事件。

在处理程序中，您可以使用valueAsNumber 将输入字段的值与0 进行比较。

使用classList.add() 或classList.remove() 添加或删除error 类。

要在出现错误时转动轮廓red，您需要将outline-color 样式设置为red，否则此默认焦点设置将覆盖您应用的任何border 颜色。

您可以在balance 输入字段上看到这种颜色效果，当余额为0 而不是红色时显示黑色轮廓，但背景为pink 表示正在应用error class .

const temperatureElement = document.getElementById('temperature');
const balanceElement = document.getElementById('balance');

temperatureElement.addEventListener('input', handleNumberInput);
balanceElement.addEventListener('input', handleNumberInput);

function handleNumberInput(e) {
  if (e.target.valueAsNumber === 0) {
    e.target.classList.add("error");
  } else {
    e.target.classList.remove("error");
  }
}

.temperature.error {
  outline-color: red;
  /* background-color: pink; */
  border: solid 2px red;
  border-radius: 2px;
  color: red;
}

.balance.error {
  /* outline-color: red; */
  background-color: pink;
  border: solid 2px red;
  border-radius: 2px;
  color: red;
}

<label for="temperature">Temperature</label>
<input id="temperature" class="temperature" type="number" step="1" value="1">
<br/>
<br/>
<label for="balance">Balance</label>
<input id="balance" class="balance" type="number" step="1" value="1">

【讨论】：