Change the background color of a webpage by clicking with the help of Javascript

Question

Change the background color of a webpage by clicking with the help of Javascript

I've been experimenting with a script that changes the CSS background color on click, but I'm having trouble adding a third color option. Can anyone provide guidance on how to make the third color work?

Check out my jsfiddle here:

https://jsfiddle.net/pkrWV/70/

var bodyObj, className, index;

bodyObj = document.getElementById('body');
index = 1;
className = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    if(index === 0){
        index = 1;
    }else{
        index = 0;
    }
}

bodyObj.onclick = function(e){
    e.currentTarget.className = className[index];
    updateIndex();
}

Thank you,

James

javascript java css colors background

Answer 1

Answer №1

To achieve this, you can utilize the modulus operator (%):

function adjustValue(){
    value = (value+1)%(arrayName.length);   
}

Check out the code in action on JSFiddle: https://jsfiddle.net/pkrWV/71/

Answer 2

To achieve this, you can utilize the modulus operator (%):

function adjustValue(){
    value = (value+1)%(arrayName.length);   
}

Check out the code in action on JSFiddle: https://jsfiddle.net/pkrWV/71/

Answer 3

Answer №2

Check out this jsfiddle for a cool demo:

Color-changing images

var bodyElement, classNames, index;

bodyElement = document.getElementById('body');
index = 1;
classNames = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    index++;
    if (index===3) {
        index = 0;
    }
}

bodyElement.onclick = function(e){
    e.currentTarget.className = classNames[index];
    updateIndex();
}

Answer 4

Check out this jsfiddle for a cool demo:

Color-changing images

var bodyElement, classNames, index;

bodyElement = document.getElementById('body');
index = 1;
classNames = [
    'imageOne',
    'imageTwo',
     'imageThree',
];

function updateIndex(){
    index++;
    if (index===3) {
        index = 0;
    }
}

bodyElement.onclick = function(e){
    e.currentTarget.className = classNames[index];
    updateIndex();
}

Answer 5

Answer №3

https://jsfiddle.net/pkrWV/72/

function modifyIndex(){
    if(index === className.length-1){
        index = 0;
    }else{
        index = index+1;
    }
}

Answer 6

https://jsfiddle.net/pkrWV/72/

function modifyIndex(){
    if(index === className.length-1){
        index = 0;
    }else{
        index = index+1;
    }
}

Change the background color of a webpage by clicking with the help of Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Where should the Java directory be included in the PATH environment variable, or how do you set the

Incorporate text into the URL of the image

Errors occurred when trying to use Jquery to handle a JSON response

In Three.js, objects are consistently displayed in a hierarchical manner, with each one appearing on top

resetting dropdown selections upon page refresh using jQuery and AJAX

Encountering an issue with Invariant Violation when attempting to retrieve a frame that is outside of the specified

What is the best approach to merge multiple songs using core Java code?

The art of selecting elements and attaching event listeners in a React environment

Is there a way to remove a row through fetch using onclick in reactjs?

Transform your HTML audio player into a Vue component

Guide to creating a fresh blank tab in Firefox with the help of Selenium and Java

An issue of InvalidFragmentDeletionException encountered while attempting to remove fragments

Refreshing ApolloClient headers following a successful Firebase authentication

I am having trouble retrieving a JsonResult from an asp.net mvc controller using $resource in angular

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

The error message is causing all blocks to change width. What steps can be taken to correct this issue

Discovering the wonders of React and Javascript through the powerful Map function

Developing versatile form elements with Formik and the Yup library for React and Vite

Assigning a value to a variable can prevent the occurrence of an

What is the best way to iterate through my array and display each value within my button element?