1

Tengo una duda de porque sucede esto en Javascript.

document.addEventListener('DOMContentLoaded', ()=>{
  var button = document.querySelector('button'),
      text_button = button.textContent;

  button.addEventListener('click', ()=>{
    text_button = "This text has been changed"
  });

})
<button>This text dont change</button>

Me explico, tengo un boton, que al dar click deberia cambiar su texto por el texto especificado en el codigo de arriba. Bueno talvez me diras que para cambiar el texto, facilmente agrego button.textContent = "here goes something" y cambia sin problemas. Pero si ya especifique antes una variable con el contenido del boton, ¿Porque al llamar esa variable no cambia el contenido del boton?. He probado con una alerta o un console y realmente si cambia. Esto servira mucho si deseas que un texto cambie en varias ocasiones y no tener que escribir button.textContent. Realmente nose porque el texto no cambia con solo llamar la variable text_button. Agradeceria que me despejen esta duda.

2
  • La propiedad textContent es un string que contiene el valor del texto del nodo, no es una referencia al mismo. Commented el 13 dic. 2020 a las 0:26
  • Entonces, la mejor manera seria como lo especifico arriba.
    – Husdady
    Commented el 13 dic. 2020 a las 2:29

2 respuestas 2

2

Esta es la razón


La razón por la que no cambia el texto del botón es porque cuando defines la variable text_button almacenas en ella el valor de la propiedad textContent del botón y no su referencia:

// Se almacena su valor y no su referencia:
var text_button = button.textContent;

Es decir, no hace referencia sobre la propiedad. Lo que hace es tomar su valor.

Comparando ambos casos:

La primera hace efectivamente lo que mencionas en la pregunta y quieres evitar. Agrego comentarios en el código para explicarlo:

document.addEventListener('DOMContentLoaded', () => {
  var button = document.querySelector('button'),

    // Obtienes el valor de la propiedad en lugar de la 
    // propiedad del objeto, almacenándonse su valor
    // finalmente en la variable «text_button»:
    text_button = button.textContent;

  button.addEventListener('click', () => {
    // Finalmente, cambias el valor de la variable
    // «text_button» y no el valor de la propiedad «textContent» del botón:
    text_button = "This text has been changed"
  });

})
<button>This text dont change</button>

Efectivamente, no funciona.

La que sigue es lo deseado:

document.addEventListener('DOMContentLoaded', () => {
  var button = document.querySelector('button'),

    // Podrías definir una función:
    textButton = texto => {
      button.textContent = texto;
    };

  button.addEventListener('click', () => {
    // Y llamarla:
    textButton("This text has been changed");
  });

})
<button>This text dont change</button>

Esto, asumiendo que deseas evitar lo siguiente:

button.textContent = "Algún texto";
1
  • 1
    gracias ! mi duda queda despejada 👍
    – Husdady
    Commented el 13 dic. 2020 a las 5:33
2

No funciona debido a que la asignación text_button = button.textContent, hace que la variable text_button almacene el string "This text dont change". Sin embargo al reasignarle un valor en text_button = "This text has been changed", solamente estas modificando el valor de una variable de tipo primitivo string, más no una propiedad del objeto button. Para modificar el nombre del botón tienes que acceder a la propiedad de dicho elemento, tal como ya habías comentado button.textContent = "here goes something".

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.