What is the reason my function is only operating with a single ID?

Question

What is the reason my function is only operating with a single ID?

I'm attempting to create color-changing "squares" that change color when clicked. The first square changes color correctly, but when I click on the others, the color change only happens on the first square.

var image_tracker = 'red';

function changeColor() {
  var image = document.getElementById('red')
  if (image_tracker == 'red') {
    image.style.backgroundColor = "blue";
    image_tracker = 'blue';
  } else {
    image.style.backgroundColor = "red";
    image_tracker = 'red';
  }
}

<div id="red" onclick="changeColor()"></div>
<div id="red" onclick="changeColor()"></div>
<div id="red" onclick="changeColor()"></div>

There are no error messages, it's just not working as I expected :D

javascript html css

Answer 1

Answer №1

It's important for IDs to be unique because the document.getElementById() method will only return the first element it finds. This means it won't know which specific element you clicked on.

To solve this issue, modify your function to accept the image as a parameter. Then, you can use this to reference the exact element that triggered the click event.

var image_tracker = 'red';

function changeColor(image) {
  if (image_tracker == 'red') {
    image.style.backgroundColor = "blue";
    image_tracker = 'blue';
  } else {
    image.style.backgroundColor = "red";
    image_tracker = 'red';
  }

}

<div onclick="changeColor(this)">1</div>
<div onclick="changeColor(this)">2</div>
<div onclick="changeColor(this)">3</div>

Answer 2

It's important for IDs to be unique because the document.getElementById() method will only return the first element it finds. This means it won't know which specific element you clicked on.

To solve this issue, modify your function to accept the image as a parameter. Then, you can use this to reference the exact element that triggered the click event.

var image_tracker = 'red';

function changeColor(image) {
  if (image_tracker == 'red') {
    image.style.backgroundColor = "blue";
    image_tracker = 'blue';
  } else {
    image.style.backgroundColor = "red";
    image_tracker = 'red';
  }

}

<div onclick="changeColor(this)">1</div>
<div onclick="changeColor(this)">2</div>
<div onclick="changeColor(this)">3</div>

Answer 3

Answer №2

If you have a set of buttons that all have similar behavior (clickable, same functionality, etc) labeled as "red", it's best to classify them using a class instead of an id:

var image_tracker = 'red';

/* Iterate all elements with "red" class */
for (const redElement of document.querySelectorAll('.red')) {

  /* Add click event handler */
  redElement.addEventListener('click', function() {
  
    /* Reuse existing click logic but based on redElement instead */
    if (image_tracker == 'red') {
      redElement.style.backgroundColor = "blue";
      image_tracker = 'blue';
    } else {
      redElement.style.backgroundColor = "red";
      image_tracker = 'red';
    }
  });
}

<!-- Define buttons as of the "red" class (and remove the "id") -->
<div class="red">Button 1</div>
<div class="red">Button 2</div>
<div class="red">Button 3</div>

Above, you'll notice that the inline "onclick" has been eliminated from the HTML in favor of the preferred addEventListener() event handling method. Hopefully, this information is helpful!

Answer 4

If you have a set of buttons that all have similar behavior (clickable, same functionality, etc) labeled as "red", it's best to classify them using a class instead of an id:

var image_tracker = 'red';

/* Iterate all elements with "red" class */
for (const redElement of document.querySelectorAll('.red')) {

  /* Add click event handler */
  redElement.addEventListener('click', function() {
  
    /* Reuse existing click logic but based on redElement instead */
    if (image_tracker == 'red') {
      redElement.style.backgroundColor = "blue";
      image_tracker = 'blue';
    } else {
      redElement.style.backgroundColor = "red";
      image_tracker = 'red';
    }
  });
}

<!-- Define buttons as of the "red" class (and remove the "id") -->
<div class="red">Button 1</div>
<div class="red">Button 2</div>
<div class="red">Button 3</div>

Above, you'll notice that the inline "onclick" has been eliminated from the HTML in favor of the preferred addEventListener() event handling method. Hopefully, this information is helpful!

What is the reason my function is only operating with a single ID?

Answer №1

Answer №2

Similar questions

transforming an array into JSON structure using node.js

Simple HTML/CSS text blocks positioned beside images in a list format

Using Regular Expressions to eliminate any characters that are not directly adjacent to numbers (beside specific characters)

Optimizing File Transfers and Streaming Using Next.js and CDN Integration

Page design ruined as a result of oversized fonts in IE9 for <h2> elements

Troubleshooting Problem with Accordion Size in CSS

Utilizing getElementsByClassName for web scraping: encountering inaccurate outcomes

When accessing the innerHTML and outerHTML properties on an HTMLElement, they may return undefined without triggering

Discovering uncategorized elements using javascript

Tips for inserting an icon alongside a list item in HTML

Ways to receive a POST request from an external server on a GraphQL Server

assign a variable a value within a function and then retrieve it externally

Creating separate files for establishing DB connection and writing Node.js queries is a recommended practice for organization

Tips for restricting the size of uploaded files or the quantity of files in multer express and effectively managing any errors

JavaScript 3D Arrays

Tips for managing Ajax JSON response in a PhoneGap application

When utilizing a JQuery plugin for sliders, Dart does not function in the same way that traditional JavaScript does

Utilizing MongoDB and Express to access collections within a controller

Eliminate the display of Last Modified date and file Size in mod_autoindex

Attempting to determine which PHP form was submitted