Как выполнить функцию при конкретном значении элемента из массива?

Question

[nihil110]

<input type="text" id="inp"><button id="btn">press</button>
        <p id="ptag"></p>

const inp = document.querySelector('#inp');
const ptag = document.querySelector('#ptag');
const body = document.querySelector('body')
const btn = document.querySelector('#btn')

let arr = ['red', 'green', 'blue']
for (i = 0; i < arr.length; i++){
  console.log(arr[i]);
}


btn.addEventListener('click', () => {
  if (inp.value !== '' && inp.value == arr[i]){
    if (inp.value = 'red') {
      body.style = `background-color : red;`
    } 
    if (inp.value = 'green') {
      body.style = `background-color : green;`;
    } 
    if (inp.value = 'blue') {
      body.style = `background-color : blue;`;

    }else{
      ptag.innerHTML = 'Invalid value...'
    }
}
})

То есть, при одном из значений массива arr (red , green , blue ) поменяется цвет body, когда элемент массива будет записан в input и будет нажата кнопка.

Comments

[szQocks]

includes

indexOf

[0xD34F]

btn.addEventListener('click', () => {
  [ body.style.backgroundColor, ptag.innerText ] = arr.includes(inp.value)
    ? [ inp.value,  '' ]
    : [ '', 'invalid value' ];
});