Javscript - если еще проблема (изменение цвета стиля, если число является отрицательным или положительным) - PullRequest
Новая
       0

Javscript - если еще проблема (изменение цвета стиля, если число является отрицательным или положительным)

2 голосов
/ 15 марта 2020

Я создал простую программу, которая содержит две кнопки «выше», которые добавляют 1 к числу, и «ниже», которые вычитают 1 из того же числа. Когда число отрицательное, оно должно изменить свой цвет на красный, а когда оно положительное, оно должно стать зеленым, но это не работает. Вот javascript 

        let num = 0;
        function higher() {
            num ++;
            document.getElementById("number").innerHTML = num;
        }
        function lower() {
            num --;
            document.getElementById("number").innerHTML = num;
        }

        // (conditionals statements below do not work for an unknown reason)
        if (num < 0) {
            document.getElementById("number").style.color = "red";
        } else if (num > 0) {
            document.getElementById("number").style.color = "green";
        }

Вот Html body 

<body>
    <div class="counter">
        <div id="number">0</div>
        <button onmousedown="higher()" class="btn_high">Higher</button>
        <button onclick="lower()" class="btn_low">Lower</button>
    </div>
</body>

Вот пример того, как должна выглядеть программа https://romeojeremiah.github.io/Counter-Project/

Ответы [ 2 ]

1 голос
/ 16 марта 2020

Вы должны поместить условный оператор в функцию, а затем вызывать эту функцию при каждом нажатии кнопки, например: 

    let num = 0;

    function higher() {
        num ++;
        document.getElementById("number").innerHTML = num;
        colorChange();
    }

    function lower() {
        num --;
        document.getElementById("number").innerHTML = num;
        colorChange();
    }

    function colorChange(){
        if (num < 0) {
            document.getElementById("number").style.color = "red";
        } else if (num > 0) {
            document.getElementById("number").style.color = "green";
        }
    }
1 голос
/ 15 марта 2020

Ничто не вызывает код в конце, так что вы никогда не увидите эти результаты. Попробуйте обернуть ваше условие в функцию, затем вызвать эту функцию в конце higher() и lower(). Например: 

let num = 0;

function higher() {
    num++;
    document.getElementById("number").innerHTML = num;
    checkNumberAndApplyStyles();
}

function lower() {
    num--;
    document.getElementById("number").innerHTML = num;
    checkNumberAndApplyStyles();
}

function checkNumberAndApplyStyles() {
    if (num < 0) {
        console.log('under')
        document.getElementById("number").style.backgroundColor = "red";
    } else if (num > 0) {
        document.getElementById("number").style.color = "green";
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...