CODEWITHSUNDEEP
javascripthtmlcss
PatrickC
PatrickC

Reputation: 101

My javascript only works on the first div?

I'm trying to write this javascript function so that when I hover on the image the title changes its color. I got it to work but for some reasons it only works for the first div...maybe my scoping is wrong?

Thanks!

<body>
    <div>
      <a href="" id="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" id="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
</body>
<script type="text/javascript">
var image = document.getElementById("img");
var text1 = document.getElementById("head1");

function textRed() {
    text1.style.color = 'red';
};

function textDefault() {
    text1.style.color = 'blue';
};

image.onmouseover = function(){
  textRed()
};

image.onmouseout = function(){
  textDefault()
};

</script>

Upvotes: 1

Views: 778

Answers (3)

tkellehe
tkellehe

Reputation: 679

The concept of having an ID is to be able to uniquely identify something. Since you want to group a bunch of HTML elements then you need to use classes.

So, use the following JavaScript function to get an array of all the elements with that ClassName.

document.getElementsByClassName("ClassName")

So, then you must loop through each element and add your functions. But, the code will not look the way you have it. There are two simple ways to implement this.

Using your design of having a function that is called could look like the following:

var elements = document.getElementsByClassName("ClassName")
for(var i in elements) {
    // Used to prevent a scoping problem where each element becomes the same.
    (function(elem) {
    elem.mouseover = function() {
        // Sets the color of that element. (Green's my favorite color... Sorry...)
        elem.style.color = 'green';
    }
    )(elements[i]);
}

Now, another way is to use the fact that when the mouseover event is triggered the scope of the function is the element. This means this is the element that is being interacted with.

...
function setColor() {
    this.style.color = `green`;
}
for(var i in elements) {
    // Nicer way...
    elements[i].mouseover = setColor;
    // Or can do something similar to what you are doing:)
    elements[i].mouseover = function() {
        // Calls the setColor function in the correct scope:)
        setColor.call(this);
    }
}

Now, I know your question was for JavaScript but it would be better to use CSS to do this.

a.ClassName {
    color: yellow;/* Default Color. Not needed unless you want to have a special color. */
}
a.ClassName:hover {
    color: green; /* Assigns the color on mouseover. */
}

Hope this helps!!

Upvotes: 1

Asons
Asons

Reputation: 87191

For this you can (and should) use css only.

a h1 {
  color: blue
}
a:hover ~ a h1 {
  color: red
}
    <div>
      <a href="" id="img1"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" id="img2"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head2"><h1>test title</h1></a>
    </div>

Upvotes: 2

user3461434
user3461434

Reputation: 174

You should never use multiple elements with the same ID's. Use classes instead and then in JS:

var image = document.getElementsByClassName("img");
var text1 = document.getElementsByClassName("head1");

The HTML then becomes:

<body>
    <div>
      <a href="" class="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" class="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" class="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" class="head1"><h1>test title</h1></a>
    </div>
</body>

Upvotes: 3

Related Questions