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

Place the emoji where the cursor is located

My query was already posted on stack overflow but unfortunately, I did not receive a response. The issue revolves around 2 links named "add emoji 1" and "add emoji 2". As mentioned earlier, my question can be accessed here: Insert smiley at cursor positio ...

Modify the internal class style to set overflow property to visible for a particular class in PrimeNG

Looking for a way to customize the styles of PrimeNG or Angular2 components? The documentation may be lacking clarity, but you can find more information at this URL: http://www.primefaces.org/primeng/#/dialog So, how do you actually go about changing the ...

Grow your website horizontally rather than vertically for a unique user experience

When I align divs to the right, they start stacking up and crowding on top of each other. When there are more than 4 divs, the fifth one jumps below the rest as the page expands downward. I want to prevent this from happening. Instead, I would like the h ...

Issues with angular-strap popover's onBeforeShow function not functioning as expected in Angular

I am currently utilizing the angular-strap popover feature. To learn more about it, visit According to the documentation, when an onBeforeShow function is provided, it should be called before the popover is displayed. However, I am experiencing issues wit ...

Configuration file stored within the node_modules directory

I have developed a generic npm package that contains my business logic. However, I require access to some information stored in my google cloud storage configuration files. How can I retrieve this data when my package is located within the node_modules fol ...

Streamline email error management within nested middleware functions

I have implemented an express route to handle password resets, which includes finding the user and performing some error handling. However, I am now faced with the challenge of adding additional error handling within a nested function, and I am uncertain a ...

Error message: NGINX combined with Express.js and socket.io, page not found

I currently have a node/express.js/socket.io application set up on an Ubuntu Server running on port 3002. I've made sure to open all ports on the machine for accessibility. When accessing the app directly at 11.111.111.1:3002/, everything runs smooth ...

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

How can I ensure that PrimeNG is functioning properly?

I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...

Avoiding the use of angle brackets in XSLT语

Looking to replace a sequence containing '.\s+\w+' with a line break This is what I currently have: <xsl:value-of select="replace($fdesc,'[.][ ]+\w+','<br/>')" /> However, I am encountering an er ...

What is the best way to locate a specific button in jQuery?

How can I determine if the target of a click event is a button element in a document? $(document).click(function(e){ if(e.target.nodeName.toLowerCase() === 'button') { // Do something } Is the code above correct for this purpose ...

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

Exploring ways to locate a specific text within a URL using nodeJS

Here is a simple code snippet with a problem to solve: var S = require('string'); function checkBlacklist(inputString) { var blacklist = ["facebook", "wikipedia", "search.ch", "local.ch"]; var found = false; for (var i = 0; i < b ...

Is there a way to conceal a slice of a pie chart in HighCharts without excluding it from the legend display?

I've been searching everywhere for a solution to this issue, but I just can't seem to pinpoint where I'm going wrong. My goal is to initiate a pie chart using HighCharts with specific slices hidden as if they were "clicked" off in the legen ...

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

Make sure to always send back JSON data when using the default error handler in ExpressJS

I'm in the process of developing an API server using ExpressJS. I want to guarantee that the server consistently delivers JSON data rather than HTML data. While I can easily make the server respond with JSON for all customized routes, I encounter diff ...

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

Unable to make a post using vue.js

I am facing an issue while trying to submit form data using "vue-resource" in my code. The error message I receive mentions a problem with the use of this method alongside vue-cli and vuetify. Error [Vue warn]: Error in v-on handler: "TypeError: this.$h ...