Estaba trabajando con un código javascript y tengo una lista de botones con los mismos nombres de clase, pero quería saber en qué botón se hace clic para obtener el valor. ¿Cómo puedo hacer eso con vanilla js? Aquí está el código de ejemplo
<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>y el código js que probé es
const rateBtn = document.getElementsByClassName("rateBtn"); function chooseRating() { for (rate in rateBtn) { console.log(rateBtn[rate]); if (rateBtn[rate].clicked === true) { rating = rateBtn[rate].value; console.log(rating); //shows 5 don't know why } } }En primer lugar, debe definir una identificación única por botón.
Además, puede pasar el elemento HTML a su método onClick como parámetro.
Así por ejemplo:
<button onclick="chooseRating(this)" id="rateBtn1" class="rateBtn" value="1">1</button> <button onclick="chooseRating(this)" id="rateBtn2" class="rateBtn" value="2">2</button> <button onclick="chooseRating(this)" id="rateBtn3" class="rateBtn" value="3">3</button> <button onclick="chooseRating(this)" id="rateBtn4" class="rateBtn" value="4">4</button> <button onclick="chooseRating(this)" id="rateBtn5" class="rateBtn" value="5">5</button>Luego, desde el código javascript de vainilla, puede obtener la identificación y el valor de su botón HTML:
function chooseRating(e) { console.log(`my ID is ${e.id}, and my value is ${e.value}`); }html:
<button onclick="chooseRating()" id="rateBtn" class="rateBtn" value="1">1</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="2">2</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="3">3</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="4">4</button> <button onclick="chooseRating()" id="rateBtn" class="rateBtn"value="5">5</button>Índice.js:
function chooseRating(e) { console.log (e.value); }Puedes ver más en este
Simplemente puede pasar una variable a la llamada de función en cada botón. EJEMPLO: onclick="miFunción(variable)"
archivo HTML:
<button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="1"> 1 </button> <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="2"> 2 </button> <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="3"> 3 </button> <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="4"> 4 </button> <button onclick="myFunction(value)" id="rateBtn" class="rateBtn" value="5"> 5 </button>Archivo JavaScript:
function myFunction(val) { console.log(val); }