I have a set of three buttons and I want the text displayed in a box to change based on which button is being hovered over. If no button is being hovered, the default text should be "See details here". Is there a more efficient way to achieve this functionality with multiple buttons?
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>