Why does my JavaScript code only function properly on the initial div element?

Question

Why does my JavaScript code only function properly on the initial div element?

I want to create a JavaScript function that changes the color of the title when I hover over an image. It seems to be working, but only for the first div. Could it be an issue with my scoping?

Thank you!

<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 changeTextRed() {
    text1.style.color = 'red';
};

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

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

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

</script>

javascript html css

Answer 1

Answer №1

Avoid using the same IDs for multiple elements as it can cause issues. Instead, utilize classes and access them in JavaScript like this:

var images = document.getElementsByClassName("img");
var headings = document.getElementsByClassName("head1");

Update your HTML to use classes:

<body>
    <div>
      <a href="" class="image"><img src="http://www.example.com/image.jpg" class="img" width="200"></a>
      <a href="" class="title"><h1>Sample Title</h1></a>
    </div>
    <div>
      <a href="" class="image"><img src="http://www.example.com/image.jpg" class="img" width="200"></a>
      <a href="" class="title"><h1>Sample Title</h1></a>
    </div>
</body>

Answer 2

Avoid using the same IDs for multiple elements as it can cause issues. Instead, utilize classes and access them in JavaScript like this:

var images = document.getElementsByClassName("img");
var headings = document.getElementsByClassName("head1");

Update your HTML to use classes:

<body>
    <div>
      <a href="" class="image"><img src="http://www.example.com/image.jpg" class="img" width="200"></a>
      <a href="" class="title"><h1>Sample Title</h1></a>
    </div>
    <div>
      <a href="" class="image"><img src="http://www.example.com/image.jpg" class="img" width="200"></a>
      <a href="" class="title"><h1>Sample Title</h1></a>
    </div>
</body>

Answer 3

Answer №2

It is recommended to use only CSS for this task.

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>

Answer 4

It is recommended to use only CSS for this task.

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>

Answer 5

Answer №3

The main purpose of having an ID is to uniquely identify something, whereas for grouping multiple HTML elements, classes are used.

To retrieve an array of all elements with a specific ClassName in JavaScript, you can utilize the following function:

document.getElementsByClassName("ClassName")

After obtaining the elements, you need to iterate through each one to apply your desired functions. There are two straightforward approaches to achieving this.

If you prefer a design where a function is called, here's an example:

var elements = document.getElementsByClassName("ClassName")
for(var i in elements) {
    (function(elem) {
    elem.mouseover = function() {
        elem.style.color = 'green';
    }
    )(elements[i]);
}

Alternatively, you can take advantage of the fact that the scope of the function during a mouseover event is the element itself:

...
function setColor() {
    this.style.color = `green`;
}
for(var i in elements) {
    elements[i].mouseover = setColor;
    elements[i].mouseover = function() {
        setColor.call(this);
    }
}

Although your question pertains to JavaScript, it's worth considering using CSS for such tasks:

a.ClassName {
    color: yellow; /* Default Color - optional */
}
a.ClassName:hover {
    color: green; /* Change color on mouseover */
}

I hope this explanation proves helpful!

Answer 6

The main purpose of having an ID is to uniquely identify something, whereas for grouping multiple HTML elements, classes are used.

To retrieve an array of all elements with a specific ClassName in JavaScript, you can utilize the following function:

document.getElementsByClassName("ClassName")

After obtaining the elements, you need to iterate through each one to apply your desired functions. There are two straightforward approaches to achieving this.

If you prefer a design where a function is called, here's an example:

var elements = document.getElementsByClassName("ClassName")
for(var i in elements) {
    (function(elem) {
    elem.mouseover = function() {
        elem.style.color = 'green';
    }
    )(elements[i]);
}

Alternatively, you can take advantage of the fact that the scope of the function during a mouseover event is the element itself:

...
function setColor() {
    this.style.color = `green`;
}
for(var i in elements) {
    elements[i].mouseover = setColor;
    elements[i].mouseover = function() {
        setColor.call(this);
    }
}

Although your question pertains to JavaScript, it's worth considering using CSS for such tasks:

a.ClassName {
    color: yellow; /* Default Color - optional */
}
a.ClassName:hover {
    color: green; /* Change color on mouseover */
}

I hope this explanation proves helpful!

Why does my JavaScript code only function properly on the initial div element?

Answer №1

Answer №2

Answer №3

Similar questions

Is there an efficient method for parsing only specific tags from an HTML using lxml? I am looking to extract a limited subset of tags from the HTML

image appears hidden by object displaying a YouTube video due to z-index property

"Utilizing Date Labels on the X-axis in Google Chart API: A Step-by-Step

Having trouble accessing information from the useSelector hook in Redux

Unleash the full potential of React and material-ui with the Raised Button feature - find out how to effortlessly keep all

Is there a feature in VS Code that can automatically update import paths for JavaScript and TypeScript files when they are renamed or

Updating array content based on property criteria

Mismatch between collection queries' IDs in MongoDB and Mongoose

Troubleshooting tips for resolving encoding issues during XML to JSON conversion

Tabulator - Using AJAX to retrieve a JSON document

Warning: The use of jQuery load to trigger a Synchronous XMLHttpRequest on the main thread is now considered deprecated

Vue.js - when it comes to rounding off digits, I keep getting unexpected results

The Jquery widget for autocompletion - "select( event, ui )"

if statement not recognizing data returned from PHP function

How can you compare input text to the input value attribute using jQuery?

Is it possible to use the Shiny conditionalPanel in a horizontal orientation?

Resolving the issue of data transmission within Yii2's framework: Page-to-page data

Adding data to a pre-made JavaScript file template to create a fresh document

Clicking on the Submit button of the post form simply refreshes the page

Exhibition: Sequential Images Transition Using JQuery