Изменение цвета фона вводимого текста на основе условного значения

Я пытаюсь создать текстовое поле ввода, и когда в текстовое поле вводятся такие значения, как 1, 2, 3, цвет фона текстового поля изменится на красный, желтый и зеленый соответственно. Я нашел подсказку здесь но не смог получить желаемый результат (условный формат). Не так хорошо в js, поэтому любая помощь будет высоко оценена

Вот так -> jsfiddle.net/zcwf1mtg

— 29.03.2019 00:10

Пожалуйста, добавьте код, который вы пробовали, к своему вопросу.

— 29.03.2019 00:14

javascript html

29.03.2019 00:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 912

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Есть много способов, но это один из способов, как вы могли бы это сделать:

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">

Большое спасибо за то, что поделились альтернативным кодом. Тоже работает :)

— 29.03.2019 10:25

Как я могу сделать это для нескольких полей ввода? если полей более 100

— 29.03.2019 15:28

@ ABS2019 Я изменил код. Если это помогло вам, отметьте этот ответ как решенный.

— 29.03.2019 15:44

29.03.2019 00:22

Метод-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);

Большое спасибо за предоставленный код. Оно работает!! Спасибо

— 29.03.2019 10:24

29.03.2019 01:23