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

Question

Я начал изучать 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 >= 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);
        };
    };

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

Answer 1

В вашем коде у вас есть:

x += document.getElementById("number").value;

с этим, вы попросили в вашей переменной "x" добавить значение вашего ввода .. с типом String ... Например, у вас естьзначение «1» на входе и 0 в вашем переменном «х». Если вы следуете вашему коду, результат после этого выражения:

x += document.getElementById("number").value;

Ваш результат будет: 01, и вы, вы хотите,: 1

потому что вы добавляете тип String в тип переменной Integer.

Вы должны проанализировать переменную в Integer с помощью этого parseInt ():

x += parseInt(document.getElementById("number").value);