Probé 2 piezas de código, una de ellas funcionó y la otra no y no estoy seguro de por qué sucedió, ya que ambas piezas de código se parecen a mí. Lo que quiero hacer es imprimir un texto diferente cada vez que un usuario hace clic en un botón. Primero, el código que no funcionaba como yo quería y el resultado siempre era err y cada vez que hacía clic en él, ni el texto cambiaba ni la consola, excepto por el número al lado de err , seguía aumentando.
function func1() { let x = document.getElementById("test1").innerHTML; if (x===""){ x = "First click"; console.log("err"); } else if (x==="First click") { x = "Second click"; console.log("err2"); } else { x = "Third click"; } } document.getElementById("click").addEventListener("click", func1);Y la segunda pieza de código que funcionó perfectamente es:
function func1() { let x = document.getElementById("test1"); if (x.innerHTML===""){ x.innerHTML = "First click"; console.log("err"); } else if (x.innerHTML==="First click") { x.innerHTML = "Second click"; console.log("err2"); } else { x.innerHTML = "Third click"; } } document.getElementById("click").addEventListener("click", func1);La reasignación de una variable no tiene efectos secundarios (en casi todos los casos): hacer someVar = newValue solo provocará cambios si otras partes del código hacen referencia someVar más adelante.
Cuando tu lo hagas
let x = document.getElementById("test1").innerHTML; invoca el captador .innerHTML del elemento, que devuelve la cadena HTML y coloca esa cadena en la variable x . Poner una nueva cadena en la variable x no cambia el elemento. Tienes que asignar a la propiedad .innerHTML del elemento para invocar al setter, razón por la cual
x.innerHTML = "Second click";obras.
Si realmente desea utilizar la sintaxis x = para modificar el texto del elemento, lo más cercano que puede obtener es definir una propiedad en la ventana para reenviar el valor.
Object.defineProperty(window, 'x', { get: () => document.getElementById("test1").innerText, set: (val) => document.getElementById("test1").innerText = val }); x // gives text value x = 'asdf' // sets to 'asdf' Por supuesto, esto es muy exagerado e innecesario simplemente para evitar agregar un .innerText y no recomendaría hacer todo eso a menos que sea realmente importante para su propósito.
Un enfoque más simple y seguro sería simplemente definir una función.
function x(v) { if (v) document.getElementById("test1").innerText = v; return document.getElementById("test1").innerText; } x() // gives text value x('asdf') // sets to 'asdf'