Моя переменная не меняется с истинного на ложное, как это исправить?

Question

Я делаю коробку, способную переключаться между 2 цветами, но ни одна из переменных не меняется. Все переменные определены и red1 = true, а green1 = false. красный и зеленый - это переменные с шестнадцатеричным кодом этого цвета.

document.addEventListener("keydown", skins)

function skins(e) {
    if (e.key == "w"){
        if (red1) {
            green1 = true;
            color = green;
            red1 = false;
        }
    }
    if (green1) {
        red1 = true;
        color = red;
        green1 = false;
    }
}

Когда я открываю его, поле становится красным, но когда я нажимаю w, ничего не происходит, когда я проверяю консоль, ни одна из переменных не имеетизменилось. Я попытался поместить предупреждение в if (red1), и это сработало.

Answer 1

var input = document.getElementById("btn");

input.addEventListener("keydown", skins)
 var red1 = true;
 var  color = "red";
 var  green1 = false;
 
function skins(e) {
    if (e.key == "w"){
        if (red1) {
            green1 = true;
            color = "green";
            red1 = false;
        }
     else if (green1) {
        red1 = true;
        color = "red";
        green1 = false;
      }
    }
   console.log(color);
}

<input type="text" id="btn">type w</input>

Если вы хотите, чтобы значения изменялись только при нажатии клавиши "w". затем попробуйте следующий код. если нет, пожалуйста, дайте мне знать сценарий.

document.addEventListener("keydown", skins)

function skins(e) {
    if (e.key == "w"){
        if (red1) {
            green1 = true;
            color = green;
            red1 = false;
        }
     else if (green1) {
        red1 = true;
        color = red;
        green1 = false;
      }
    }

}

Answer 2

У вас проблемы с областью действия. Прямо сейчас red1 и green1 не определены в вашем примере. Если значения не определены, вы не сможете вызвать условные операторы. Но для простоты давайте предположим, что вы определили red1 как true и green1 как false ранее в своем коде. Если пользователь нажимает клавишу w, код попадет в первый условный код и переключит red1 на false и green1 на true. (Я игнорирую цветовую переменную в этой точке.)

Затем код переходит к следующему условному условию, и теперь green1 имеет значение true, поэтому он устанавливает red1 обратно в true, а green1 обратно в false. Возможно, вы захотите добавить возврат после условного выражения red1 true. Возврат выходит из функции, не позволяя ей достичь следующего условия.

document.addEventListener("keydown", skins)

function skins(e) {
    if (e.key == "w"){
        if (red1) {
            green1 = true;
            color = green;
            red1 = false;
            return;
        }
    }
    if (green1) {
        red1 = true;
        color = red;
        green1 = false;
    }
}