Tengo una serie de formularios en una página, cada uno de los cuales tiene un contador de texto simple en el elemento de entrada (para ilustrar la longitud de un título a medida que se escribe). Cuando estaba trabajando en cómo hacer el contador, estaba en una instancia singular del formulario.
¿Cómo lo hago para que el contador funcione en relación con nextElementSibling cuando hay varias instancias del formulario? Hubiera pensado que se haría con la propiedad e.target , pero no puedo averiguar cómo almacenar el elemento de entrada como un objetivo, por así decirlo. Pensé que e.target = item en el siguiente código funcionaría, pero esto no es así.
Codepen: https://codepen.io/thechewy/pen/powZppR
var title = document.querySelectorAll(".image-title-upload"), charsRemaining = document.querySelectorAll(".image-title-upload").nextElementSibling, maxValue = 125; title.forEach((item) => { item.addEventListener("input", (e) => { //e.target = item; thought this might work but it doesn't remaining = maxValue - item.value.length; // work out how many characters are left charsRemaining.textContent = remaining; }); }); form { margin-bottom: 2rem; } span { display: block; margin-top: 4px; } <form> <input class="image-title-upload" type="text" name="image-title" placeholder="Title"> <span class="tl characters-remaining">125</span> </form> <form> <input class="image-title-upload" type="text" name="image-title" placeholder="Title"> <span class="tl characters-remaining">125</span> </form>Por aquí
const titleInput = document.querySelectorAll(".image-title-upload") , maxValue = 125; titleInput.forEach( item => { item.oninput = e => { item.nextElementSibling.textContent = maxValue - item.value.length } }) form { margin-bottom: 2rem; } span { display: block; margin-top: 4px; } <form> <input class="image-title-upload" type="text" name="image-title" placeholder="Title"> <span class="tl characters-remaining">125</span> </form> <form> <input class="image-title-upload" type="text" name="image-title" placeholder="Title"> <span class="tl characters-remaining">125</span> </form>también puedes usar
e.target.closest('form').querySelector('.characters-remaining').textContent = ....