Question

我正在尝试创建一个输入文本字段，当在文本字段中键入诸如1、2、3之类的值时，该文本字段的背景色将分别变为Red，Yellow和Green。我找到了一些线索here 但无法获得我想要的输出（有条件的格式）。 js并不是很好，所以我们将不胜感激

Answer 1

有很多方法，但这是一种方法：

const colors = document.querySelectorAll('.colors');

for (let color of colors) {
  color.addEventListener('keyup', () => {
    if (this.event.target.value == 1) {
      this.event.target.style.backgroundColor = 'red';
    }
    else if (this.event.target.value == 2) {
      this.event.target.style.backgroundColor = 'yellow';
    }
    else if (this.event.target.value == 3) {
      this.event.target.style.backgroundColor = 'green';
    }
    else {
      this.event.target.style.backgroundColor = 'inherit';
    }
  })
}

<input type="text" class="colors">
<input type="text" class="colors">
<input type="text" class="colors">

Answer 2

方法-01：
使用开关：

HTML：

<input type="number" id="color" />

JS：

function changeColor(e){
    var color;

    switch(e.target.value){
        case 1:
            color = "red";
            break;
        case 2:
            color = "yellow";
            break;
        case 3:
            color = "green";
            break;
        default:
            color = "white";
    }
    e.target.style.backgroundColor = color;
}

document.getElementById("color").addEventListener("input", changeColor);

方法-02：
使用其他方式：

HTML：

<input type="number" id="color" />

JS：

function changeColor(e){
    var value = e.target.value;
    var color;

    if(value == 1){
        color = "red";
    }
    else if(value == 2){
        color = "yellow";
    }
    else if(value == 3){
         color = "green";
    }
    else {
         color = "white";
    }

    e.target.style.backgroundColor = color;
}

document.getElementById("color").addEventListener("input", changeColor);

根据条件值更改输入文本的背景色

2 个答案: