JavaScript не может ввести значение в переменную JS

Невозможно ввести значение в переменную JS

Я начал изучать JavaScript сегодня, и для его тестирования я создал страницу, которая меняет изображение, отображаемое при нажатии на элемент div. Все работало нормально, но я хотел знать, как я могу добавить элемент ввода, чтобы указать, сколько шагов я хочу прыгать при каждом нажатии кнопки. Я пришел с идеей, но она не работает. Похоже, что переменная является своего рода «накапливающими» значениями, когда я его консолью. Я свяжу коды, первый работает, а второй нет. Первые используют фиксированные значения, а квадрат меняет цвета, как и должно быть (изображения на самом деле не имеют значения). Второй должен переходить по шагам: ввод 1 будет таким же, как и первый, ввод 2 приведет к переходу на один цвет.

https://jsfiddle.net/u2s3pqxL/1/

 window.onload = function(){ var x = 0; document.getElementById("teste").onclick = function(){myFunction()}; function myFunction(){ if (x == 0){ document.getElementById("teste").style.backgroundColor = "red"; document.getElementById("taiga").style.opacity = 1; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = document.getElementById("number").value; } else if (x == 1){ document.getElementById("teste").style.backgroundColor = "blue"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 1; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = document.getElementById("number").value; } else if (x == 2){ document.getElementById("teste").style.backgroundColor = "yellow"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 1; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = document.getElementById("number").value; } else if (x == 3){ document.getElementById("teste").style.backgroundColor = "purple"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 1; x  = document.getElementById("number").value; } else if (x == 4){ document.getElementById("teste").style.backgroundColor = "black"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 1; document.getElementById("moge-ko").style.opacity = 0; x = 0; } console.log(x); }; }; 

https://jsfiddle.net/c3s1opb7/7/

 window.onload = function(){ var x = 0; document.getElementById("teste").onclick = function(){myFunction()}; function myFunction(){ if (x == 0){ document.getElementById("teste").style.backgroundColor = "red"; document.getElementById("taiga").style.opacity = 1; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = 1; } else if (x == 1){ document.getElementById("teste").style.backgroundColor = "blue"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 1; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = 1; } else if (x == 2){ document.getElementById("teste").style.backgroundColor = "yellow"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 1; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 0; x  = 1; } else if (x == 3){ document.getElementById("teste").style.backgroundColor = "purple"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 0; document.getElementById("moge-ko").style.opacity = 1; x  = 1; } else if (x {amp}gt;= 4){ document.getElementById("teste").style.backgroundColor = "black"; document.getElementById("taiga").style.opacity = 0; document.getElementById("nanachi").style.opacity = 0; document.getElementById("azami").style.opacity = 0; document.getElementById("kcalb").style.opacity = 1; document.getElementById("moge-ko").style.opacity = 0; x = 0; } console.log(x); }; }; 

Что я должен сделать, чтобы второй работал?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector