¿Cómo puedo obtener a través de javascript todos los elementos de la misma identificación y aplicarles el mismo valor a todos?
A continuación se muestra mi formulario. Es un bucle que crea 71 subdivs y cada uno de ellos contiene una imagen de botón específica y entradas ocultas. Se supone que cada una de las entradas tiene el mismo nombre e identificación que las otras 70.
Si hago visible la entrada y pongo $i como valor, cuando se carga la página, muestra todo correcto. 71 imágenes con 71 valores diferentes. Aunque si envío de esa manera, siempre obtendré el mismo valor en mi controlador sin importar la imagen en la que elija hacer clic.
Entonces, quiero agregar a mi función onMouseOver una forma de establecer el valor actual de la imagen flotante en todas las entradas. De esa manera, si hago clic en la imagen para enviar, el valor se habría establecido correctamente.
mi formulario:
<form action="/searches/se_racestandingsround" method="post">@csrf <div class="row mt-5 mr-5 ml-5"> <?php for($i=2021; $i>=1950; $i--){ ?> <div class="col-3 d-flex flex-column align-items-center mb-3 mt-5"> <div class="w-50 mb-5 rounded-circle" style="height: 150px;"> <div class="bg-dark w-100 h-100 mb-5 border rounded-circle toClick" id="<?php echo $i ?>" onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)"> <input type="hidden" name="round" id="round"> <input type="hidden" name="rnd" id="rnd"> <button style="object-fit:cover" class="w-100 h-100 border rounded-circle"><img src='/imgs/jpg/years/<?php echo $i ?>.jpg' style="object-fit:cover" class="w-100 h-100 border rounded-circle"></button> </div> </div> </div> <?php } ?> </div> </form>Mi función onMouseOver:
function onMouseOver(year){ // alert("Hello! I am an alert box!!"); var curYear = year.id; // document.getElementById('rnd').value = currentNumOfRounds; //NOT WORKING // document.getElementById('round').value = curYear; //NOT WORKING }Si insiste en usar una identificación para varios elementos, entonces su única opción es usar querySelectorAll :
setTimeout(() => { document.querySelectorAll("#a").forEach(v => { v.innerText = "what"; }) }, 3000); <p id="a">one</p> <p id="a">two</p> <p id="a">three</p> <p id="a">four</p>Pero realmente deberías estar usando clases en su lugar.
all the elements of the same id una identificación tiene que ser única dentro del documento.
Habiendo dicho eso, teóricamente podría consultar todos los elementos con el mismo valor para el atributo id utilizando el selector de atributos.
function setAllElementsTo(value) { document.querySelectorAll('[id="a"]').forEach(element => { element.value = value }) } setAllElementsTo('a'); <input id="a"> <input id="a"> <input id="a"> <input id="a"> <input id="a">Esto funciona pero no cambia el hecho de que el documento es semánticamente incorrecto.
En su lugar, debe usar ID diferentes y usar algo más que esos elementos tengan en común. Como una clase, un atributo de data- o cualquier otra cosa que tenga sentido.
Para ampliar las explicaciones, los ID están destinados a ser únicos y solo aparecen una vez en una página. Esto ayuda a las personas que usan lectores de pantalla y mantiene su javascript limpio. JS asume que solo tiene una instancia de una ID en una página, por lo que solo devolverá la primera instancia, por lo que probablemente siempre obtiene el mismo valor en su controlador.
Sin embargo, debería poder usar una clase en su lugar para lograr lo que está tratando de hacer.