I have three button elements and depending on which button is hovered over I want the text box to have a diffrent text. When not hovering over the buttons text element should have "See details here". I would like to have 20 buttons is there a better solution than the one below?
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>Use an object to hold all the messages, and give the elements a data attribute containing the key in the object.
Give all the elements a common class so you can select them and loop over them.
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>Register the mouseover event to the tag that contains all of the buttons. Now you can listen for an as many buttons you want as long as they are in that tag (.button-box). You can expand your reach by going up the DOM tree (all the way up to window) on just one event handler. See event delegation
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>You can assign a common class to all buttons and set the message you want to display in each button tag. Then you can get all buttons using querySelectorAll and loop thru the element list to assign the event listeners. Here is an example:
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>