Cada vez que selecciono un nuevo botón de opción en mi HTML, la función newChord() solo genera 1 en la consola, sin importar la opción. Por ejemplo, si seleccioné el botón Avanzado en lugar de Principiante, la consola debería mostrar 3 (asociado a Avanzado a través de JS), pero solo muestra 1 (asociado a Principiante). Me lleva a creer que hay algo mal con las declaraciones if (vago, lo sé...) pero no puedo entender por qué funciona para la opción de principiante, pero no para ninguna de las otras.
código HTML
<div class="difficulty_btn"><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>Código JavaScript
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); } }Cualquier ayuda se agradece, gracias por adelantado.
Esta línea
if ($("input[name='difficulty']:checked").val('beginner'))no está comparando el valor del atributo marcado, lo está asignando.
Probablemente quieras algo como esto en su lugar:
if ($("input[name='difficulty']:checked").val() == 'beginner') { console.log(1); } else if ($("input[name='difficulty']:checked").val() == 'intermediate') { console.log(2); } .... and so onChris Smith tiene razón, sin embargo, podría mejorarlo almacenando el valor seleccionado en una variable. Además, no necesita usar else if , usar if es suficiente. Hice un fragmento con tu código. Agregué el activador de evento change() a los valores de salida en la consola.
$('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 class="difficulty_btn"><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>