Html Question posted in
Some basic documentation can be found here.

Html – Javascript-How can I change style of my app in a click and change again in a second click and return to my initial style in third click

I’m making a calculator with Javascript and I want to make a button that if I click on it whole style of my project changes and if I click again whole style changes again and at third click it returns to initial style

I don’t have any Idea how I can change whole style for three times just with one button?

Tags:

4

Answers


  1. 0

    You can create different css classes and put them in an array. Everytime you click on a button you can switch styles by changing index. Since you did not provide any code here is an example.

    let styleIndex = 0;
const styles = ['style1', 'style2', 'style3']; // styles array

function changeStyle() {
    styleIndex = (styleIndex + 1) % styles.length;
    document.body.className = styles[styleIndex];
}
    body.style1 {
    background-color: white;
    color: black;
}

body.style2 {
    background-color: black;
    color: white;
}

body.style3 {
    background-color: blue;
    color: yellow;
}

/* You can change the css classes depends on your choice and application */
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="style1">
    <button onclick="changeStyle()">Click to change background color</button>
    <script src="script.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    I hope I understood your question.

    [Here][1] is the working code example you can try out.

    To create a button that changes the entire style of your project each time you click it, you can follow these steps:

    First, you’ll need to define your different styles in a CSS file. For example, you might have three themes: a default theme, a dark theme, and a colorful theme. Each theme can be represented by a class with its own set of styles, like background color and text color. You also add a class that will ensure transitions between themes are smooth.

    In your HTML file, you’ll include a button that will be used to toggle between these themes. You will also apply an initial style to the body or a container element.

    In the JavaScript file, you’ll write code to handle the theme changes. You’ll set up an event listener for the button so that when it is clicked, the JavaScript function will run. Inside this function, you’ll keep track of the current theme using an index variable. Each time the button is clicked, the code will remove the class of the current theme from the body and add the class for the next theme. The index variable will be updated to point to the next theme, and if it reaches the end of the list, it will loop back to the beginning.

    Login or Signup to reply.
  3. 0

    You can look into using CSS properties/variables to define the different styles for your themes (this way you can avoid defining the styles 3 times for each theme for every class that you have), and then apply the theme with the variable definitions to a root element such as your body:

    const btn = document.querySelector("#change-theme-btn");

let themeIdx = 0;
const themes = ["theme1", "theme2", "theme3"];

function setTheme() {
  document.body.classList.remove(...themes);
  const nextTheme = themes[themeIdx++ % themes.length];
  document.body.classList.add(nextTheme);
}

btn.addEventListener("click", setTheme);
setTheme();
    .theme1 {
  --primary-bg-color: yellow;
  --primary-text-color: red;
}

.theme2 {
  --primary-bg-color: black;
  --primary-text-color: white;
}

.theme3 {
  --primary-bg-color: cyan;
  --primary-text-color: black;
}

body {
  background-color: var(--primary-bg-color);
}

.text {
  color: var(--primary-text-color);
}
    <p class="text">Text</p>
<button id="change-theme-btn">Change theme</button>
    Login or Signup to reply.
  4. 0

    I would suggest in this case to use switch construct to scale and optimise the code. This approach may be unnecessary if you are writing a simple solution, but I would still use an ‘adult’ solution here.

    Create an array to store the different styles for your application. Each style will be represented by an object, where keys are CSS properties and values are their values (we can also store here the icon that should appear when clicked or fonts, in general, additional modifications):

    const styles = [
    { backgroundColor: ‘white’, colour: ‘black’ }, // Initial style
    { backgroundColor: ‘black’, colour: ‘white’ }, // Second style
    { backgroundColor: ‘gray’, colour: ‘blue’ }, // Third style
];

    Use a counter to keep track of how many times the button has been clicked and a switch construct to apply the appropriate style:

    let counter = 0;

function changeStyle() {
    const calculator = document.getElementById(‘calculator’); // Assume that your application has the id ‘calculator’
    
    switch(counter) {
        case 0:
            Object.assign(calculator.style, styles[0]);
            break;
        case 1:
            Object.assign(calculator.style, styles[1]);
            break;
        case 2:
            Object.assign(calculator.style, styles[2]);
            break;
    }
    
    counter = (counter + 1) % styles.length; // Increase the counter and reset it to 0 if it reaches the length of the styles array
}

    Well, and bind this function to the click event on the button:

    <button onclick=‘changeStyle()’>Change Style</button>

    I would like to say at once that my solution only complements the answer of user @nofoundname

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search