Estoy tratando de crear una secuencia de comandos que muestre un contenido de texto diferente cuando el mouse se desplace sobre un botón específico. Estoy creando un sitio web de cartera, y deseo tener el título del proyecto, y cuando pase el mouse, muestre una descripción del proyecto antes de hacer clic.
Puedo cambiar el contenido de un solo botón usando JS por:
let newText = "New text goes here" let btn = document.querySelector(".btn"); btn.addEventListener("mouseover", function() { this.textContent = newText; }) btn.addEventListener("mouseout", function() { this.textContent = "Existing Text"; })Obviamente, necesitaré más de un botón para agregar mis proyectos a la página, así que estaba buscando formas de simplificar esto. Actualmente estoy tratando de ejecutar algo como:
const btn = document.getElementsByClassName('btn'); const DESCRIPTIONS = { "projectOne": "projectOne text goes here", "projectTwo": "projectTwo text goes here" }; btn.addEventListener("mouseover", ({target}) => { this.innerText = DESCRIPTIONS[target.id]; console.log(target); }) Pero recibo el error: Uncaught TypeError: btn.addEventListener no es una función, aunque puedo console.log(btn) y puedo ver la matriz actual de botones que he creado para proyectos.
No estoy seguro de si esta es la manera perfecta de hacer las cosas, pero toda ayuda sería muy apreciada, ya que me estoy rascando un poco la cabeza con esto.
Me complace proporcionar cualquier información adicional que me haya perdido.
Gracias por adelantado,
Kaimac
Definitivamente podría hacerlo más modular si tiene los selectores de botones y la acción correspondiente encapsulada en un objeto/matriz. Piensa en un mapa de botones vs descripciones. Luego, puede tener una función común en la que document.querySelector('.buttonClassName') para encontrar el botón y luego agregar las devoluciones de llamada necesarias al evento de clic. De esta manera, su js no tendría un código de trabajo similar en todas partes y sería más limpio.
getElementsByClassName devuelve una matriz, por lo que debe recorrer los elementos:
const btn = document.getElementsByClassName('btn'); const DESCRIPTIONS = { "projectOne": "projectOne text goes here", "projectTwo": "projectTwo text goes here" }; var i = 0, length = btn.length; for (i; i < length; i++) { if (document.addEventListener) { btn[i].addEventListener("mouseover", ({ target }) => { this.innerText = DESCRIPTIONS[target.id]; console.log(target); }) } else { btn[i].attachEvent("mouseover", ({ target }) => { this.innerText = DESCRIPTIONS[target.id]; console.log(target); }) }; }; btn.addEventListener("mouseover", ({ target }) => { this.innerText = DESCRIPTIONS[target.id]; console.log(target); })