JavaScript for Color Swapping on Click Event

Question

JavaScript for Color Swapping on Click Event

While working on coding a website, I attempted to change colors and pictures onclick using JavaScript to edit the CSS. However, the code is only partially functional. Only the "txtArea" field changes color. After checking validators and consoles, everything seems to be syntactically correct.

<!-- This button triggers the color change. -->
<div id="colorSelector"><span id="chngBlue"><a href="#" onclick="chngColor()">&bull;</a></span> &bull; &bull;</div>

<script>
var colors = ["#0099cc", "#669900", "#993333"];//Blue, Green, Red

function chngColor(){
document.getElementById("txtArea").style.backgroundColor = colors[2];
document.getElementsByClassName("labHdr")[0].style.backgroundColor = colors[2]; 
document.getElementById("newLink").style.color = colors[2];
document.getElementById("hdBanner").src='bannerred.png';
}
</script>

javascript html css validation debugging

Answer 1

Answer №1

When using document.getElementsByClassName("labHdr"), you will receive an HTMLCollection as a return value (credit to @Teemu for the clarification). This collection does not have a 'style' property by default. To apply styles to elements within this collection, you can utilize the following code snippet:

var myElements = document.getElementsByClassName("labHdr");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.color = colors[2];
}

Answer 2

When using document.getElementsByClassName("labHdr"), you will receive an HTMLCollection as a return value (credit to @Teemu for the clarification). This collection does not have a 'style' property by default. To apply styles to elements within this collection, you can utilize the following code snippet:

var myElements = document.getElementsByClassName("labHdr");

for (var i = 0; i < myElements.length; i++) {
    myElements[i].style.color = colors[2];
}

Answer 3

Answer №2

The method getElementsByClassName will give back an object that looks like an array, so remember to access it with an index even if there is only one element inside.

Therefore, the second line of the function should now be:

document.getElementsByClassName("labHdr")[0].style.backgroundColor = colors[2];

http://codepen.io/markwill/pen/rrAXzr

If there are multiple elements with this class, you will need to loop through each one and set the desired style (it's better to do this than assuming there is only one).

Answer 4

The method getElementsByClassName will give back an object that looks like an array, so remember to access it with an index even if there is only one element inside.

Therefore, the second line of the function should now be:

document.getElementsByClassName("labHdr")[0].style.backgroundColor = colors[2];

http://codepen.io/markwill/pen/rrAXzr

If there are multiple elements with this class, you will need to loop through each one and set the desired style (it's better to do this than assuming there is only one).

Answer 5

Answer №3

Modify:

function chngColor(){
    document.getElementById("txtArea").style.backgroundColor = colors[2];
    document.getElementsByClassName("labHdr").style.backgroundColor = colors[2];
    document.getElementById("newLink").style.color = colors[2];
    document.getElementById("hdBanner").src='bannerred.png';
}

To this:

function chngColor(){
    var labelList = document.querySelectorAll(".labHdr");
    document.getElementById("txtArea").style.backgroundColor = colors[2];
    document.getElementById("newLink").style.color = colors[2];
    document.getElementById("hdBanner").src='bannerred.png';

    Array.prototype.map.call(labelList, function(element) { 
        element.style.backgroundColor = colors[2]; 
    });

}

This change will update all your labels.

Answer 6

Modify:

function chngColor(){
    document.getElementById("txtArea").style.backgroundColor = colors[2];
    document.getElementsByClassName("labHdr").style.backgroundColor = colors[2];
    document.getElementById("newLink").style.color = colors[2];
    document.getElementById("hdBanner").src='bannerred.png';
}

To this:

function chngColor(){
    var labelList = document.querySelectorAll(".labHdr");
    document.getElementById("txtArea").style.backgroundColor = colors[2];
    document.getElementById("newLink").style.color = colors[2];
    document.getElementById("hdBanner").src='bannerred.png';

    Array.prototype.map.call(labelList, function(element) { 
        element.style.backgroundColor = colors[2]; 
    });

}

This change will update all your labels.

Answer 7

Answer №4

To change the color of an element, you can use the getElementById method as shown in the example below:

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

Answer 8

To change the color of an element, you can use the getElementById method as shown in the example below:

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

JavaScript for Color Swapping on Click Event

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue with margin-top in combination with clear:both does not function as expected

Adjust the canvas size to perfectly fit within the parent bootstrap cell in a grid layout

Executing a callback in Node.js after a loop is complete

Encountering the error message "Undefined variable '$'" in a script that is loaded after jQuery

the table image does not resize correctly in mobile view

The error message that you are seeing is indicating that the `contracts` property of `this.state

Receive characteristics in component specification

Obtain variable declared in script tag (Google Chrome Extension)

How can I effectively implement a withAuth higher order component (HOC) in TypeScript within Next.js?

How to Use PHP to Submit Form Information

Push-grid interaction through drag-and-drop feature

Ways to extract the id after clicking

Adding a custom validation function to the joi.any() method - the easy way!

Combining images with PHP

Guide to organizing an express.js project structure:

Tips for Removing Scrollbars on Mobile Devices

difficulty in obtaining information submitted through a form

Disable the height property in the DOM when implementing the jQueryUI resizable feature

Having trouble with the placement of my footer div - seeking a solution

Shapes in Three.js with multiple colors