Change content of divs separately

user_2762504 0
Viewed 94

I'm trying to add some content inside my divs on hover, but not the CSS way.

function hover(description){
  console.log(description);
  document.getElementById('first-item').innerHTML = description;
  document.getElementById('second-item').innerHTML = description;
}
.slide {
  background: blue;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
}
<?php
  $content = "some text";
?>

<div>
  <div>
    <div class="slide" id="first-item" onmouseover="hover('<?php echo $content; ?>')" onmouseout="hover('')"></div>
    <div class="slide" id="second-item" onmouseover="hover('<?php echo $content; ?>')" onmouseout="hover('')"></div>
    <div class="slide" id="third-item"></div>
  </div>
</div>

I want only the content of the .first-item to change when I hover it and only the content of the .second-item to change when I hover it. But as you can see when I hover either one, the content of both changes.

What did I do wrong?

html php javascript
3 Answers

You can pass this as a element reference in hover function for both mouse in and mouse out so that you can then use this reference in JavaScript to set innerHTML of that particular element:

function hover(elem, description) {
  elem.innerHTML = description;
}
.slide {
  background: blue;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
}
<div>
    <div>
      <div class="slide" id="first-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
      <div class="slide" id="second-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
      <div class="slide" id="third-item" onmouseover="hover(this, 'sampleText')" onmouseout="hover(this, '')"></div>
    </div>
  </div>

user_70531900

What about passing an element as a parameter of the function?

<style>
    .slide {
        background:blue;
        width:200px;
        height:200px;
        float:left;
        margin:10px;
    }
</style>

<div>
    <div>
        <div class="slide" id="first-item" onmouseover="hover(this, 'MyContent')" onmouseout="hover(this, '')"></div>
        <div class="slide" id="second-item" onmouseover="hover(this, 'MyContent')" onmouseout="hover(this, '')"></div>
        <div class="slide" id="third-item"></div>
    </div>
</div>

<script>
    function hover(element, description) {
        console.log(description);
        element.innerHTML = description;
    }
</script>

The "this" refers to the current element, that way you are able to choose what will be displayed

user_98632980

Let's take a look at your hover() function:

function hover(description) {
    console.log(description);
    document.getElementById('first-item').innerHTML = description;
    document.getElementById('second-item').innerHTML = description;
}

This will fill both of the divs with with the given content, since you don't make a difference which div should be filled with content. However, you can pass this as an argument of your function, so you will always just modify the element you are currently hovering:

function hover(element, description) {
    console.log(description);
    element.innerHTML = description;
}

The you just have to change your HTML markup the following way:

<div>
    <div class="slide" id="first-item" onmouseover="hover(this, '<?php echo $content; ?>')" onmouseout="hover(this, '')"></div>
    <div class="slide" id="second-item" onmouseover="hover(this, '<?php echo $content; ?>')" onmouseout="hover(this, '')"></div>
    <div class="slide" id="third-item"></div>
</div>
user_70083540
Related