Adjust the button's hue upon clicking it

The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again".

<!DOCTYPE html>
<html>
    <body>

        <button id="toggle" onclick="myFunction()" onclick="setcolor(blue)">click me</button>

        <script>

            function myFunction() {

                var change = document.getElementById("toggle");
                if (change.innerHTML == "click me again"){
                    change.innerHTML = "click me";
                }
                else {
                    change.innerHTML = "click me again";
                }
            }
        </script>
    </body>
</html>

Answer №1

Eliminate the additional onclick event from the button, and insert the coloring code within your myFunction:

if (modify.innerHTML == "press me once more") {
    modify.innerHTML = "press me";
    modify.style.background='green'
}
else {
    modify.innerHTML = "press me once more";
    modify.style.background='yellow'
}

Answer №2

Change background color on button click with a single function

<button id="toggle" onclick="myFunction()" >click me</button>

<script>

    function myFunction() {

        var change = document.getElementById("toggle");
        if (change.innerHTML == "click me again")
        {
            change.innerHTML = "click me";
            change.style.backgroundColor = "blue"

        }
        else {
            change.innerHTML = "click me again";
          change.style.backgroundColor = "red"
        }
    }

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging titles on the top of the page in a column format, resembling an index

Has anyone figured out how to make the title of the content stick at the top, one below the other, as the user scrolls? I've been using Bootstrap's Scrollspy, which works fine, but I need a few additional features. You can check out the codepen l ...

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

Comparing two tables in jQuery/Javascript for matching data

I want to check for matches between the rows of two HTML tables, where the data in the first cell can be duplicated but the data in the second cell is always unique. The goal is to determine if the combination of values in the first and second cells of tab ...

Integrating an API with a Discord bot using an embedded link in Discord.js

I am currently in the process of creating a bot that can generate and embed links to display manga titles, tags, and other information based on user-input digits. I have been exploring an API called this and I am eager to learn the most effective method ...

Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a le ...

What is the best way to send a 102 Processing status code in Express?

I'm in the process of configuring a new HTTP server to run a lengthy command and return the output of that shell command back to the client. Currently, I am using Express v4.17.1. However, requests from clients are consistently timing out when runnin ...

methods to locate the parent element of an element with selenium

<button class="wpO6b ZQScA" type="button"> <div class="QBdPU "> <svg aria-label="New Message" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 44 44" widt ...

Progressing with JavaScript: Implementing Sound Controls and Dynamic Image Switching

I am looking to create a button that, when clicked, displays a small image and plays a sound. The button should change to a different image and stop the sound when clicked again. Essentially, it functions as a "start" button that loops the sound and change ...

Steps for transitioning a VUE JS project to TypeScript

Is it possible to transition a VUE JS project from JavaScript to TypeScript without rewriting everything? I heard from a friend that it can be done through the VUE CLI, but I haven't been able to find any documentation or articles on this method. Has ...

Despite passing JSLint, an unexpected end of input still occurred

It seems a bit absurd; despite my efforts, I'm unable to locate the syntax error. The Chrome debugger keeps indicating an "unexpected end of input" in line two. Any suggestions? $("head meta").each(function () { var content = JSON.parse(this.cont ...

Trouble with CSS solution for fixed header/columns in HTML table on Firefox

My current project involves implementing sticky headers/columns on a table for the client. Unfortunately, using a real script for this purpose is not feasible due to an already high object count on the page which is resulting in speed issues. However, I h ...

Executing webpack with specific settings in Node.js

In my current package.json file, I have a script defined as follows: "build": "webpack --inline --colors --progress --display-error-details --display-cached", Additionally, there is a webpack.config.js file located at the root of my repository. To strea ...

What is the best way to align this form perfectly in Bootstrap 4?

HTML <div class="container-fluid background"> <div class="row"> <!-- background effect --> <div id="particles-js"> <div class="login col-12"> <form class="login-form" method="post" action=""> ...

Converting a JavaScript variable into PHP using ajax: A comprehensive guide

Can someone please help me troubleshoot this code for passing a JavaScript variable to PHP? It doesn't seem to be working properly. I want to extract the value of an ID from JavaScript and send it over to PHP. <!DOCTYPE html> <html> ...

Unable to populate an array with JSON elements within a for loop triggered by useEffect

In my code, there is an issue with the array candleRealTimeDataQueue not updating correctly. Below is the snippet of the problematic code: let candleCurrentJSONDataWS = null; var candleRealTimeDataQueue = []; let tempDateTime = null; let ca ...

Utilizing ngRepeat to build intricate rows within a table

I have a unique collection that appears as follows: { "10": {}, "12": { "20": { "value": 1, "id": 1, }, "100": { "value": 12, "id": 1, } }, "14": { "10 ...

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

Transferring information from the main function to getServerSideProps

I've been facing challenges while trying to pass data from a function component to the getServerSideProps method in Next.js. As a beginner in learning Next.js, I am struggling to understand this concept. My approach involves using context from _app, b ...