Tengo tres elementos de botón y, según el botón sobre el que se desplace, quiero que el cuadro de texto tenga un texto diferente. Cuando no pase el cursor sobre los botones, el elemento de texto debe tener "Ver detalles aquí". Me gustaría tener 20 botones, ¿hay una solución mejor que la siguiente?
var button1 = document.querySelector(".button1"); var button2 = document.querySelector(".button2"); var button3 = document.querySelector(".button3"); var textBox = document.querySelector(".text-box") button1.addEventListener("mouseover", button1function, false); button2.addEventListener("mouseover", button2function, false); button3.addEventListener("mouseover", button3function, false); button1.addEventListener("mouseout", func1, false); button2.addEventListener("mouseout", func1, false); button3.addEventListener("mouseout", func1, false); function button1function() { textBox.innerHTML = "Hovering over button 1" } function func1() { textBox.innerHTML = "See details here" } function button2function() { textBox.innerHTML = "Hovering over button 2" } function button3function() { textBox.innerHTML = "Hovering over button 3" } .text-box { width: 400px; height: 100px; border: 1px solid blue; } <div class="button-box"> <button class="button1">Button 1</button> <button class="button2">Button 2</button> <button class="button3">Button 3</button> </div> <p class="text-box">See details here</p>Utilice un objeto para contener todos los mensajes y asigne a los elementos un atributo de datos que contenga la clave en el objeto.
Asigne a todos los elementos una clase común para que pueda seleccionarlos y recorrerlos.
const textBox = document.querySelector(".text-box") const messages = { b1: "Hovering over button 1", b2: "Hovering over button 2", b3: "Hovering over button 3" }; document.querySelectorAll('button.msg').forEach(button => { button.addEventListener("mouseover", e => textBox.innerHTML = messages[e.currentTarget.dataset.msg], false); button.addEventListener("mouseout", func1, false); }); function func1() { textBox.innerHTML = "See details here" } .text-box { width: 400px; height: 100px; border: 1px solid blue; } <div class="button-box"> <button class="button1 msg" data-msg="b1">Button 1</button> <button class="button2 msg" data-msg="b2">Button 2</button> <button class="button3 msg" data-msg="b3">Button 3</button> </div> <p class="text-box">See details here</p>Registre el evento mouseover en la etiqueta que contiene todos los botones. Ahora puede escuchar tantos botones como desee, siempre que estén en esa etiqueta ( .button-box ). Puede ampliar su alcance subiendo por el árbol DOM (hasta la window ) en un solo controlador de eventos. Ver delegación de eventos
document.querySelector('.button-box').onmouseover = messageID; function messageID(event) { const hvr = event.target; document.querySelector('.text-box').textContent = hvr.className; } .text-box { width: 400px; height: 100px; border: 1px solid blue; } <div class="button-box"> <button class="button1">Button 1</button> <button class="button2">Button 2</button> <button class="button3">Button 3</button> <button class="button11">Button 11</button> <button class="button12">Button 12</button> <button class="button13">Button 13</button> <button class="button21">Button 21</button> <button class="button22">Button 22</button> <button class="button23">Button 23</button> <button class="button31">Button 31</button> <button class="button32">Button 32</button> <button class="button33">Button 33</button> <button class="button41">Button 41</button> <button class="button42">Button 42</button> <button class="button43">Button 43</button> <button class="button51">Button 51</button> <button class="button52">Button 52</button> <button class="button53">Button 53</button> <button class="button61">Button 61</button> <button class="button62">Button 62</button> <button class="button63">Button 63</button> <button class="button71">Button 71</button> <button class="button72">Button 72</button> <button class="button73">Button 73</button> <button class="button81">Button 81</button> <button class="button82">Button 82</button> <button class="button83">Button 83</button> <button class="button91">Button 91</button> <button class="button92">Button 92</button> <button class="button93">Button 93</button> </div> <p class="text-box">See details here</p>Puede asignar una clase común a todos los botones y establecer el mensaje que desea mostrar en cada etiqueta de button . Luego puede obtener todos los botones usando querySelectorAll y recorrer la lista de elementos para asignar los detectores de eventos. Aquí hay un ejemplo:
var textBox = document.querySelector(".text-box") var buttons = document.querySelectorAll('.btn') buttons.forEach(button => { button.addEventListener("mouseover", () => { textBox.innerHTML = button.dataset.hover }, false); button.addEventListener("mouseout", () => { textBox.innerHTML = "See details here" }, false); }) .text-box { width: 400px; height: 100px; border: 1px solid blue; } <div class="button-box"> <button class="btn button1" data-hover="Hovering over button 1">Button 1</button> <button class="btn button2" data-hover="Hovering over button 2">Button 2</button> <button class="btn button3" data-hover="Hovering over button 3">Button 3</button> </div> <p class="text-box">See details here</p>