having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't.

<script>
   let myBtn = document.querySelector("#menuBtn");

   function toggleMargin() {
    var Menubase = document.getElementById("list-menu-base");
    if (Menubase.style.marginTop === "0px") {
      Menubase.style.marginTop = "-250px";
    } else {
      Menubase.style.marginTop = "0px";
    }
  }

myBtn.onclick = toggleMargin;

   // The function above works, but the one below does not// 

   function changeColor() {
    var Menubase = document.getElementById("menuBtn");
    if (Menubase.style.backgroundColor === "red") {
      Menubase.style.backgroundColor = "#FF7E00";
    } else {
      Menubase.style.backgroundColor = "#FF7E00";
    }
  }

myBtn.onclick = changeColor;
</script>
javascripthtmlcss

Answer №1

Irrespective of the code within each function block.

Avoid having two onClick Events assigned to the same element.

Encapsulate both functions within a single container function like this: 

function fullFunction() { 
   myFunction1();
   myFunction3();
}
myBtn.onclick = fullFunction;

Another point is: It's recommended to use color codes in rgb format in your JavaScript code instead of hex.

Demo: 

let myBtn = document.querySelector("#menuBtn");

function myFunction1() {
  var Menubase = document.getElementById("list-menu-base");
  if (Menubase.style.marginTop === "0px") {
    Menubase.style.marginTop = "25px";
  } else {
    Menubase.style.marginTop = "0px";
  }
}

function myFunction3() {
  var myBtn = document.getElementById("menuBtn");
  if (myBtn.style.backgroundColor === "rgb(142, 253, 27)") {
    myBtn.style.backgroundColor = "rgb(255, 103, 0)";
  } else {
    myBtn.style.backgroundColor = "rgb(142, 253, 27)";
  }
}

function fullFunction() {
  myFunction1();
  myFunction3();
}
myBtn.onclick = fullFunction;
#menuBtn {
  background-color: rgb(255, 103, 0);
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  margin-top: 100px;
}

#list-menu-base {
  background-color: antiquewhite;
  width: 100%;
  height: 50px;
}
<div id="list-menu-base"></div>
<a id="menuBtn" href="#">MENU BUTTON</a>

Answer №2

Your JavaScript code needs to be corrected.

function updateMenu() {
    var menuBtn = document.getElementById("menuBtn");
    // Red color does not exist, you can try using RGB values instead
    if (menuBtn.style.color == 'rgb(255, 0, 0)') {
        menuBtn.style.backgroundColor = "rgb(255,126,0)";
    } else {
        menuBtn.style.backgroundColor = "rgb(255,126,100)";
    }
}

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

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

htmlcss

The identification number is not used to update Mongo DB

When attempting to use the MongoDB driver in Node.js to update a document, I encountered an issue where the log indicated that the update was successful, but the data did not reflect the changes. Specifically, despite trying to update the document using it ...

javascriptnode.jsmongodb

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

Blocking the space bar in JavaScript is a useful technique that can be

I'm in the process of developing an application and I'm looking to prevent the space bar from scrolling my page My framework of choice is VUE, and I am trying to trigger a method using an event handler However, when I attempt to call the ' ...

javascriptvue.js

Building a React.js application and fetching information with Ajax

In my quest to create a high-speed React.js application that functions as a game, I find myself in need of displaying real-time data. However, the traditional method of loading this data from the server using Ajax doesn't quite align with the reactive ...

javascriptajaxreactjssocket.io

The state of the checked value remains unaffected when using the Angular Material Checkbox

I am currently working on a list of elements and implementing a filter using pipes. The filter allows for multi-selection, so users can filter the list by more than one value at a time. To ensure that the filter persists even when the window is closed or t ...

javascriptangularangular-material

I have a task of extracting information from a live Google map and generating a static Google map using API V3

I am working on a project that involves allowing users to create maps using Google Maps and then save the image. My current workaround uses both the Google Maps API V3 and the Static Maps API. The user can interact with the dynamic Google map by scrolling ...

javascriptgoogle-mapsgoogle-maps-api-3google-maps-static-api

Having trouble with npm install, unable to successfully install any node modules after cloning my project from git

I recently pulled my project from a git repository and encountered issues while attempting to run npm install. Despite trying different solutions like running npm install --save core-js@^3 to address the core-js error, I keep receiving the same message pr ...

javascriptnode.jsnpm

Enable autocomplete feature in a PHP form once the user starts typing their name

After searching for similar questions, I couldn't find any with the same "variables," so here's my dilemma: I have a basic form where I input a name and I want the rest of the form to be filled in automatically (ID). Retrieving data from the da ...

javascriptphpjqueryajaxautocomplete

I'm a beginner when it comes to Android WebView and incorporating JavaScript into my projects

Struggling to make my Android app work with JavaScript, even though I've enabled it. Despite all the research I've done suggesting it should work, it's not. Any assistance would be greatly appreciated. Below is my Java code: protected ...

javascriptandroidjqueryandroid-webview

Abundance of DOM elements - the difference between hidden and display none

When I have numerous DOM elements on my page and assign them all a display: none property, the browser continues to perform quickly (smooth scrolling and snappy page response). But if I hide the elements using visibility: hidden instead, the browser slows ...

htmlcssdom

Tables lacking borders where rowspans are present

I'm currently using Firefox and have the following code snippet: html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } body { padding-left: 20px; padding-right: 20px; } .visitentabelle { border: 2px solid black; ...

htmlcss

Issue with bookmarklet compatibility on mobile browsers like iOS and Android

Here is the bookmarklet code I have: javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js";c.onload=c.onreadystate ...

javascriptjqueryajax

Get your hands on a PDF containing server node and vue.js

I am facing an issue with creating a secure download link for a PDF file on the server. When clicking on the link, the file is not being downloaded properly. Ensuring that the PDF link remains hidden from the client but still allows for downloading direct ...

javascriptnode.jsexpressvue.js

Display the website logo when users share on WhatsApp

My goal is to have my website icon appear in WhatsApp when I share it (similar to the example below). https://i.stack.imgur.com/KCWi8.jpg I initially tried using this code, but it didn't work: <link rel="shortcut icon" href="css/img/favicon/favi ...

htmlcsswhatsappico

What is the best way to obtain a user's ID on the server side?

I'm currently working on a node.js application using express and I am in need of retrieving the user ID. I would like to have something similar to "req.userID" so that I can use it in the following way: var counter=0; var user = new Array(); router.g ...

javascriptnode.jsexpressserveruser-management

Issue with jqGrid Multiple Selection

When constructing my jqgrid, I utilize the following code: multiselect: true This enables a check all column. However, clicking the check all checkbox (located at the header) selects all checkboxes, but does not click the checkboxes in each row. You can ...

javascriptjqueryjqgrid

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

What is the Angular alternative to control.disable when working with a QueryList?

I have encountered a challenge in my Angular form where I need to disable certain fields. The issue arises from the fact that many of the HTML tags used are customized, making it difficult to simply use the disabled attribute. To address this, I have opted ...

htmlangularangular-reactive-formsdisabled-input

Tips for accurately measuring the height of a single table cell

I am facing an issue with a table that I have set up. Here is the code: <table> <tr> <td id='tdleftcontent' style='border:1px solid red;'> <asp:Label ID='lbl' runat="server"></asp:Label> < ...

javascriptasp.net