Change text in element when another element is hovered over-CodePudding

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 >
        <button >Button 1</button>
        <button >Button 2</button>
        <button >Button 3</button>
    </div>
    
    <p >See details here</p>

CodePudding user response：

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 >
  <button  data-msg="b1">Button 1</button>
  <button  data-msg="b2">Button 2</button>
  <button  data-msg="b3">Button 3</button>
</div>

<p >See details here</p>

CodePudding user response：

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 >
  <button >Button 1</button>
  <button >Button 2</button>
  <button >Button 3</button>
  <button >Button 11</button>
  <button >Button 12</button>
  <button >Button 13</button>
  <button >Button 21</button>
  <button >Button 22</button>
  <button >Button 23</button>
  <button >Button 31</button>
  <button >Button 32</button>
  <button >Button 33</button>
  <button >Button 41</button>
  <button >Button 42</button>
  <button >Button 43</button>
  <button >Button 51</button>
  <button >Button 52</button>
  <button >Button 53</button>
  <button >Button 61</button>
  <button >Button 62</button>
  <button >Button 63</button>
  <button >Button 71</button>
  <button >Button 72</button>
  <button >Button 73</button>
  <button >Button 81</button>
  <button >Button 82</button>
  <button >Button 83</button>
  <button >Button 91</button>
  <button >Button 92</button>
  <button >Button 93</button>
</div>

<p >See details here</p>

CodePudding user response：

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 >
  <button  data-hover="Hovering over button 1">Button 1</button>
  <button  data-hover="Hovering over button 2">Button 2</button>
  <button  data-hover="Hovering over button 3">Button 3</button>
</div>

<p >See details here</p>

CodePudding user response：

It was too late... :)

const buttons = document.getElementsByClassName("hover-button");
const textBox = document.querySelector(".text-box")

Array.prototype.slice.call(buttons).forEach(btn => btn.addEventListener("mouseover", onm ouseOver, false));
Array.prototype.slice.call(buttons).forEach(btn => btn.addEventListener("mouseout", onm ouseOut, false));

function onm ouseOver(e)
{
  textBox.innerHTML = e.target.innerText;
}

function onm ouseOut()
{  
  textBox.innerHTML = "See details here"
}

.text-box {
    width: 400px;
    height: 100px;
    border: 1px solid blue;
}

    <div >
        <button >Button 1</button>
        <button >Button 2</button>
        <button >Button 3</button>
        <button >Button 4</button>
        <button >Button 5</button>
        <button >Button 6</button>
        <button >Button 7</button>
        <button >Button 8</button>
        <button >Button 9</button>
        <button >Button 10</button>
        <button >Button 11</button>
        <button >Button 12</button>
        <button >Button 13</button>
        <button >Button 14</button>
        <button >Button 15</button>
        <button >Button 16</button>
        <button >Button 17</button>
        <button >Button 18</button>
        <button >Button 19</button>
        <button >Button 20</button>
    </div>
    
    <p >See details here</p>