HTML:
<h1 id="ws-title"></h1> <time datetime="" id="ws-date"></time>JS:
inp1 = document.querySelector("input[name='ws-date']"); out1 = document.querySelector("#ws-date"); inp1.addEventListener("input", e => { out1.textContent=e.target.value; }); inp2 = document.querySelector("input[name='ws-title']"); out2 = document.querySelector("#ws-title"); inp2.addEventListener("input", e => { out2.textContent=e.target.value; });Funciona como se esperaba (es decir: cambiar los cambios de entrada correspondientes h2).
Sin embargo:
function pairListen(name) { inp = document.querySelector(`input[name='${name}']`); out = document.querySelector(`#${name}`); inp.addEventListener("input", e => { out.textContent=e.target.value; }); } pairListen("ws-title"); pairListen("ws-date"); Hace que se cambie <h2 id="ws-date"> cuando se cambia <input name="ws-title"> y viceversa.
¿Porqué es eso? La única diferencia es que el código repetido está incrustado en una función.
Esto se debe a que cuando declara una variable sin un declarador (es decir, var , let o const ), se define automáticamente en window , this y globalThis (haciendo que ese tipo de variables sean globales , accesibles en cualquier parte de su código). La segunda vez que haces varName = "value"; , no está redeclarando la variable. Lo estás modificando. Puede resolver esto aplicando un declarador.
function pairListen(name) { const inp = document.querySelector(`input[name='${name}']`); const out = document.querySelector(`#${name}`); inp.addEventListener("input", e => { out.textContent=e.target.value; }); } pairListen("ws-title"); pairListen("ws-date"); <h1 id="ws-title"></h1> <input name="ws-title" /> <h2 id="ws-date"></h2> <input name="ws-date" /> Moraleja de la historia: siempre declare variables con declaradores, o encontrará resultados sin precedentes. Puedes obligarte a seguir un buen estilo agregando "use strict"; en la parte superior de todos sus archivos JavaScript, que no tolerarán la escritura de código que le dará resultados inesperados.