Why is the value of the radio button selected not updating?-CodePudding

Whenever I select a new radio button on my HTML, the function newChord() only outputs 1 to the console, no matter the option. For example, if I've selected the button Advanced instead of Beginner, the console should show 3 (associated to Advanced through JS), but it's still only showing 1 (associated to Beginner). The leads me to believe that there's something wrong with the if statements (vague I know...) but I can't figure out why it's working for the beginner option, but not any of the others.

HTML Code

<div ><br>
          <form>
            <input type="radio" id="beginner_btn" name="difficulty" value="beginner" checked>
            <label for="beginner_btn">Beginner</label>

            <input type="radio" id="intermediate_btn" name="difficulty" value="intermediate">
            <label for="intermediate_btn">Intermediate</label>

            <input type="radio" id="advanced_btn" name="difficulty" value="advanced">
            <label for="advanced_btn">Advanced</label>

            <input type="radio" id="mixed_btn" name="difficulty" value="all">
            <label for="mixed_btn">Mixed</label>

          </form><br>
</div>

Javascript Code

function newChord() {
    
    if ($("input[name='difficulty']:checked").val('beginner')) {
        console.log(1);
        
    } else if ($("input[name='difficulty']:checked").val('intermediate')) {
        console.log(2);

    } else if ($("input[name='difficulty']:checked").val('advanced')) {
        console.log(3);
        
    } else if ($("input[name='difficulty']:checked").val('all')) {
        console.log(4);
    }
}

Any help is appreciated, thanks in advance.

CodePudding user response：

This line

if ($("input[name='difficulty']:checked").val('beginner'))

is not comparing the checked attribute's value, it's assigning it.

You probably want something like this instead:

if ($("input[name='difficulty']:checked").val() == 'beginner') {
    console.log(1);
} else if ($("input[name='difficulty']:checked").val() == 'intermediate') {
    console.log(2);
}
.... and so on

CodePudding user response：

Chris Smith is right, however you could improve it by storing the selected value in a variable. Also you don't need to use else if, using if is enough. I made a snippet with your code. I added the change() event trigger to output values in console.

$('input:radio[name="difficulty"]').change(function(){
    let checkedValue = $("input[name='difficulty']:checked").val();
    
    if (checkedValue =='beginner'){
        console.log(1);
    } 
    if (checkedValue == 'intermediate'){
        console.log(2);
    } 
    if (checkedValue == 'advanced'){
        console.log(3);
    }
    if (checkedValue == 'all'){
        console.log(4);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><br>
          <form>
            <input type="radio" id="beginner_btn" name="difficulty" value="beginner" checked>
            <label for="beginner_btn">Beginner</label>

            <input type="radio" id="intermediate_btn" name="difficulty" value="intermediate">
            <label for="intermediate_btn">Intermediate</label>

            <input type="radio" id="advanced_btn" name="difficulty" value="advanced">
            <label for="advanced_btn">Advanced</label>

            <input type="radio" id="mixed_btn" name="difficulty" value="all">
            <label for="mixed_btn">Mixed</label>

          </form><br>
</div>