Этот код не работает и является ли он более эффективным способом сделать это, чем использование оператора else if?

Question

Я новичок во всем этом, у меня есть проект для колледжа, не могу заставить его работать, и, похоже, много повторяющегося кода, любая помощь будет отличной, спасибо.

var strength = document.getElementById('getstren');
strength.innerHTML = Math.floor((Math.random() * 17) + 1);

    if (strength == 1) {
        document.getElementById('ath').innerHTML = "-5"

    }else if (strength == 2 || strength == 3) {
        document.getElementById('ath').innerHTML = "-4"

    }else if (strength == 4 || strength == 5) {
        document.getElementById('ath').innerHTML = "-3" 

    }else if (strength == 6 || strength == 7) {
        document.getElementById('ath').innerHTML = "-2"
    }
    else if (strength == 8 || strength == 9) {
        document.getElementById('ath').innerHTML = "-1"
    }
    else if (strength == 10 || strength == 11) {
        document.getElementById('ath').innerHTML = "0"      
    }
    else if (strength == 12 || strength == 13) {
        document.getElementById('ath').innerHTML = "1"
    }
    else if (strength == 14 || strength == 15) {
        document.getElementById('ath').innerHTML = "2"  
    }
    else if (strength == 16 || strength == 17) {
        document.getElementById('ath').innerHTML = "3"
    }
    else if (strength == 18) {
        document.getElementById('ath').innerHTML = "4"
    }

Я думаю, что должно отображаться число для силы и должно отображаться другое число для легкой атлетики в зависимости от первой цифры!

Answer 1

Во-первых, вам нужно получить доступ к innerHTML из strength и использовать parseInt, чтобы сделать его целым числом. Во-вторых, вы можете использовать следующий оператор, чтобы сделать ваш код проще: document.getElementById('ath').innerHTML = Math.floor(strength / 2) - 5.

var strength = document.getElementById('getstren');
strength.innerHTML = Math.floor((Math.random() * 17) + 1);
document.getElementById('ath').innerHTML = Math.floor(parseInt(strength) / 2) - 5;

Answer 2

Переменная strength представляет собой HTMLElement .Следовательно, оно никогда не будет равно целому числу.

Чтобы получить доступ к html-элементу HTMLElement, вы можете использовать свойство innerHTML , которое возвращает строку.Вы можете использовать parseInt для приведения его к целому числу.

Пример:

// Assumes strength is defined

const strengthInt = parseInt(strength.innerHTML)

if(strength == 1){
  // Set ath html
}
//Other if-else here

Что касается альтернативы if-else, посмотрите на switch.