Javascript выполняет две функции одновременно с 1 (событие onclick) - PullRequest
0 голосов
/ 18 сентября 2018

Мне нужно выполнить две функции js одновременно с одним событием onclick. Когда я щелкаю квадрат, меню показывает, но в то же время круг внутри меняет свой цвет (в этот момент я должен щелкнуть дважды), и когдаЯ снова нажимаю на квадрат, меню исчезает, и круг снова меняется на его цвет по умолчанию.

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>

Ответы [ 5 ]

0 голосов
/ 18 сентября 2018

Просто объедините код обоих и используйте одну функцию, используя новую функцию lightOn (). Я включил код для ее переключения.Все функции выполняются последовательно, поэтому лучше запускать их в одном блоке.

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>
0 голосов
/ 18 сентября 2018

Вот точный ответ, который вы ищете:

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

Стоит отметить, что есть более изящные способы достижения этого, где я считаю элегантный способ размещения гораздо большего количества двух функций безухудшение читаемости.

Одним из таких способов является определение новой функции, как уже упоминалось ранее, например:

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

Другой способ - полностью исключить атрибут onclick и вместо этого привязать обработчики событий кЭлемент DOM напрямую, который является предпочтительным решением, если вы являетесь поклонником ненавязчивого javascript .

Если они должны быть последовательными, то вот так:

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

В противном случае, вот так:

<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>
0 голосов
/ 18 сентября 2018

Ваша функция lightOn работает неправильно.#light не имеет для начала чёрного фона, поэтому вы не синхронизированы.

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>
0 голосов
/ 18 сентября 2018

Почему бы просто не переключать классы?

ПРИМЕЧАНИЕ: я тоже убрал встроенный щелчок

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>
0 голосов
/ 18 сентября 2018

Определите новую функцию для вызова двух функций:

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

Затем используйте функцию onClick в атрибуте onclick

<div onclick="onClick()" ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...