Javascript execute two functions at the same time with 1 (onclick event)

Question

I need to execute two js functions at the same time with one onclick event When I click the square, the menu shows but at the same time the circle inside changes his color (in this moment I have to click twice) and when I click again the square, the menu goes away and the circle change again to his default color.

https://jsfiddle.net/7bnp14vq/31/

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function lightOn() {
  var x = document.getElementById('light');
  if (x.style.background === 'black') {
    x.style.background = 'gold';
  } else {
    x.style.background = 'black';
  }
}

* {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  height: 100%;
}

body {
  background: #0d0d0d;
  font-family: 'Poppins', sans-serif;
}

nav {
  /*   background:blue; */
  text-align: center;
  width: 100%;
}

.nav-list {
  display: flex;
}

.nav-items {
  flex-grow: 1;
  flex-basis: 0;
  text-decoration: none;
  font-size: 1.4em;
  margin: 0 15px;
  padding: 15px 0;
  transition: 0.3s;
}

.nav-items:hover {
  border-top: 2px solid white;
  font-size: 1.6em;
  text-shadow: 2px 2px 2px #595959;
}

.nav-items:active {
  color: red;
}

.start-button {
  background: linear-gradient(to top, #abbaab, #ffffff);
  width: 165px;
  height: 165px;
  display: flex;
  margin: 15px auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.start-button-light {
  width: 90px;
  height: 90px;
  /*   background:#0d0d0d;  */
  background: black;
  margin: auto;
  border-radius: 45px;
  border: inset 1px #bfbfbf;
  color: white;
}

#myDropdown {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s all ease-in-out;
  color: white;
}

.show {
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
}

<nav class="dropdown">

  <div onclick="myFunction(); lightOn()" class="start-button dropbtn">
    <div class="start-button-push dropbtn">
      <div id="light" class="start-button-light dropbtn"></div>

    </div>
  </div>

  <div id="myDropdown" class="nav-list">
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
  </div>
</nav>

Answer 1

Here's the exact answer for which you're looking:

onclick="myFunction();lightOn();"

It's worth noting that there are more elegant ways to achieve this, where I think of elegant as accommodating possibly much more than two functions without compromising readability.

One such way is defining a new function, as mentioned earlier, like this:

function doBoth() {
    myFunction();
    lightOn();
}

Another is avoiding the onclick attribute entirely and instead binding event handlers to the DOM element directly, which is the preferred solution if you're a fan of unobtrusive javascript.

If they need to be sequential, then like this:

<a id="the-button" class="btn btn-primary">Click me</a>
<script>
    document.getElementById("the-button").addEventListener("click", function(){
        myFunction();
        lightOn();
    });
</script>

Otherwise, like this:

<a id="the-button" class="btn btn-primary">Click me</a>
<script>
    document.getElementById("the-button").addEventListener("click", myFunction);
    document.getElementById("the-button").addEventListener("click", lightOn)
</script>

Answer 2

Your lightOn function is not toggling correctly. #light does not have 'black' as a background to begin with, so you're off sync.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function lightOn() {
  var x = document.getElementById('light');
  if (x.style.background !== 'gold') {
    x.style.background = 'gold';
  } else {
    x.style.background = 'black';
  }
}

* {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  height: 100%;
}

body {
  background: #0d0d0d;
  font-family: 'Poppins', sans-serif;
}

nav {
  /*   background:blue; */
  text-align: center;
  width: 100%;
}

.nav-list {
  display: flex;
}

.nav-items {
  flex-grow: 1;
  flex-basis: 0;
  text-decoration: none;
  font-size: 1.4em;
  margin: 0 15px;
  padding: 15px 0;
  transition: 0.3s;
}

.nav-items:hover {
  border-top: 2px solid white;
  font-size: 1.6em;
  text-shadow: 2px 2px 2px #595959;
}

.nav-items:active {
  color: red;
}

.start-button {
  background: linear-gradient(to top, #abbaab, #ffffff);
  width: 165px;
  height: 165px;
  display: flex;
  margin: 15px auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.start-button-light {
  width: 90px;
  height: 90px;
  /*   background:#0d0d0d;  */
  background: black;
  margin: auto;
  border-radius: 45px;
  border: inset 1px #bfbfbf;
  color: white;
}

#myDropdown {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s all ease-in-out;
  color: white;
}

.show {
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
}

<nav class="dropdown">

  <div onclick="myFunction(); lightOn()" class="start-button dropbtn">
    <div class="start-button-push dropbtn">
      <div id="light" class="start-button-light dropbtn"></div>

    </div>
  </div>

  <div id="myDropdown" class="nav-list">
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
  </div>
</nav>

Answer 3

Just combine code of both and use one function use new lightOn() I merged code for toggle in it. All functions run sequentially so its better to run them in same block.

function lightOn() {
  var x = document.getElementById('light');
  if (x.style.background !== 'gold') {
    x.style.background = 'gold';
     document.getElementById("myDropdown").classList.toggle("show");

  } else {
    x.style.background = 'black';
   document.getElementById("myDropdown").classList.toggle("show");

  }
}

* {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  height: 100%;
}

body {
  background: #0d0d0d;
  font-family: 'Poppins', sans-serif;
}

nav {
  /*   background:blue; */
  text-align: center;
  width: 100%;
}

.nav-list {
  display: flex;
}

.nav-items {
  flex-grow: 1;
  flex-basis: 0;
  text-decoration: none;
  font-size: 1.4em;
  margin: 0 15px;
  padding: 15px 0;
  transition: 0.3s;
}

.nav-items:hover {
  border-top: 2px solid white;
  font-size: 1.6em;
  text-shadow: 2px 2px 2px #595959;
}

.nav-items:active {
  color: red;
}

.start-button {
  background: linear-gradient(to top, #abbaab, #ffffff);
  width: 165px;
  height: 165px;
  display: flex;
  margin: 15px auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.start-button-light {
  width: 90px;
  height: 90px;
  /*   background:#0d0d0d;  */
  background: black;
  margin: auto;
  border-radius: 45px;
  border: inset 1px #bfbfbf;
  color: white;
}

#myDropdown {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s all ease-in-out;
  color: white;
}

.show {
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
}

<nav class="dropdown">

  <div onclick=" lightOn()" class="start-button dropbtn">
    <div class="start-button-push dropbtn">
      <div id="light" class="start-button-light dropbtn"></div>

    </div>
  </div>

  <div id="myDropdown" class="nav-list">
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
  </div>
</nav>

Answer 4

Why not just toggle classes?

NOTE: I removed the inline click too

function toggleBoth() {
  document.getElementById("myDropdown").classList.toggle("show");
  document.getElementById("light").classList.toggle("on");
}
document.querySelector(".start-button").addEventListener("click",toggleBoth,false)

* {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  height: 100%;
}

body {
  background: #0d0d0d;
  font-family: 'Poppins', sans-serif;
}

nav {
  /*   background:blue; */
  text-align: center;
  width: 100%;
}

.nav-list {
  display: flex;
}

.nav-items {
  flex-grow: 1;
  flex-basis: 0;
  text-decoration: none;
  font-size: 1.4em;
  margin: 0 15px;
  padding: 15px 0;
  transition: 0.3s;
}

.nav-items:hover {
  border-top: 2px solid white;
  font-size: 1.6em;
  text-shadow: 2px 2px 2px #595959;
}

.nav-items:active {
  color: red;
}

.start-button {
  background: linear-gradient(to top, #abbaab, #ffffff);
  width: 165px;
  height: 165px;
  display: flex;
  margin: 15px auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.start-button-light {
  width: 90px;
  height: 90px;
  /*   background:#0d0d0d;  */
  background: black;
  margin: auto;
  border-radius: 45px;
  border: inset 1px #bfbfbf;
  color: white;
}

#myDropdown {
  opacity: 0;
  visibility: hidden;
  transition: 1.5s all ease-in-out;
  color: white;
}

.show {
  display: flex;
  opacity: 1 !important;
  visibility: visible !important;
}
.on { background : gold}

<nav class="dropdown">

  <div class="start-button dropbtn">
    <div class="start-button-push dropbtn">
      <div id="light" class="start-button-light dropbtn"></div>

    </div>
  </div>

  <div id="myDropdown" class="nav-list">
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
    <a href="#" class="nav-items">HOME</a>
  </div>
</nav>

Answer 5

Define a new function to call the two functions:

function onClick() {
  myFunction();
  lightOn();
}

Then use the onClick function in your onclick attribute

<div onclick="onClick()" ...