How to use elseif statement to show hidden text

Question

New to Javascript, need some help with hidden panels.

I want the user to answer some questions in a radio button form which will have different values assigned to the checked answers. There will be 3 different options of results in hidden panels, one result will be displayed at the end depending on the score.

Link to full code and html here

function results() {
            var lRisk = document.getElementById('lowRisk')
            var mRisk = document.getElementById('mediumRisk')
            var hRisk = document.getElementById('highRisk')

        if ((score >= 0) && (score =< 15)) {
            lRisk.style.display = 'inline';
        } else if ((score >= 16) && (score <= 25)) {
    mRisk.style.display = 'inline';
         } else {
        lRisk.style.display = 'inline';
        }

Would be very grateful for any help/advice!

Answer 1

If you need to display only ONE control based on the score, you should make all of them hidden in the start then do your conditions.

function results() {
        var lRisk = document.getElementById('lowRisk')
        var mRisk = document.getElementById('mediumRisk')
        var hRisk = document.getElementById('highRisk')

        lRisk.style.display = 'none';
        mRisk.style.display = 'none';
        hRisk.style.display = 'none';

        if (score >= 0 && score <= 15) {
            lRisk.style.display = 'inline';
        } else if (score >= 16 && score <= 25) {
            mRisk.style.display = 'inline';
        } else {
            hRisk.style.display = 'inline';
        }
}