Javascript выполняет две функции одновременно с 1 (событие onclick)

Question

Javascript выполняет две функции одновременно с 1 (событие onclick)

1

Мне нужно выполнить две функции 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>

aleduque 18 сен. 2018, в 19:28

Источник

1

Почему нет document.getElementById("myDropdown").classList.toggle("show"); document.getElementById("light").classList.toggle("on");
mplungjan 18 сен. 2018, в 17:20
1

Как предложил @mplungjan, переключение классов CSS лучше, так как оно отделяет код от дизайна.
PeterM 18 сен. 2018, в 17:22
0

Все забыли о addEventListener ? Объедините функции или используйте это дважды.
sqykly 18 сен. 2018, в 17:55
0

@sqykly нет, я не забыл. Смотри мой ответ
mplungjan 18 сен. 2018, в 18:57

Показать ещё 2 комментария

Теги:

javascript

function

events

5 ответов

3

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

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

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

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

Rob Brander 18 сен. 2018, в 15:43

0

Я не верю, что это проблема здесь. Это проблема его функций, а не их запуска.
frobinsonj 18 сен. 2018, в 17:55
0

Спасибо за вашу помощь @Rob Brander
aleduque 18 сен. 2018, в 23:29

0

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

ПРИМЕЧАНИЕ. Я также удалил встроенный клик

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>

mplungjan 18 сен. 2018, в 16:03

0

большое спасибо mplungjan
aleduque 18 сен. 2018, в 23:33

0

Вот точный ответ, за который вы смотрите:

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

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

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

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

Другой onclick полностью исключить атрибут 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>

André-Jacques de Beer 18 сен. 2018, в 15:02

0

спасибо большое Андре-Жак де Бир
aleduque 18 сен. 2018, в 23:34
0

@aleduque, пожалуйста
André-Jacques de Beer 19 сен. 2018, в 14:30

0

Функция 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>

Profit 18 сен. 2018, в 14:50

0

спасибо за вашу помощь
aleduque 18 сен. 2018, в 23:33
0

Да, у него есть черный фон. Посмотри на css. Также это id = "свет"
mplungjan 19 сен. 2018, в 04:07
0

@mplungjan Да, у него черный фон, но он не будет в .styles . Вы можете получить доступ только к свойствам стиля, которые были установлены с помощью атрибута style (если только вы не извлекаете вычисленные стили). Также спасибо, я #light свой ответ с #light
frobinsonj 19 сен. 2018, в 08:20
0

Посмотрите на .start-button-light в таблице стилей
mplungjan 19 сен. 2018, в 08:22
0

Посмотрите этот пример, @mplungjan codepen.io/anon/pen/RYEPpG
frobinsonj 19 сен. 2018, в 08:33
0

Что я должен увидеть? Что такое обсуждение? Круг был черным и не нужно синхронизировать
mplungjan 19 сен. 2018, в 08:36
0

Фон не может быть прочитан изначально, потому что он установлен в таблице стилей, а не в строке. Из-за этого при первом щелчке фон становится черным через JS, это означает, что его можно прочитать при следующем щелчке, и тогда он будет отображать золото. Это означает, что он не совпадает с отображением раскрывающегося списка. Плохой выбор формулировки с моей стороны с «синхронизацией». @mplungjan
frobinsonj 19 сен. 2018, в 08:41
0

Ах, теперь я понимаю - мой ответ не волнует, поэтому я изначально не понял, что вы имели в виду!
mplungjan 19 сен. 2018, в 08:42
0

Тем не менее, тест! = Золото, которое верно
mplungjan 19 сен. 2018, в 08:44
0

Да, именно :) Извините за мое плохое объяснение
frobinsonj 19 сен. 2018, в 08:44
0

Но это делает ваш комментарий недействительным. Если это! = Gold для начала, скрипт установит значение в gold, а затем скрипт установит его в черный цвет - здесь нет ничего несинхронизированного
mplungjan 19 сен. 2018, в 16:48
0

Давайте продолжим эту дискуссию в чате .
frobinsonj 19 сен. 2018, в 18:46
0

Я не на своем компьютере
mplungjan 19 сен. 2018, в 18:53

Показать ещё 11 комментариев

Ещё вопросы

Почему нет document.getElementById("myDropdown").classList.toggle("show"); document.getElementById("light").classList.toggle("on");
Как предложил @mplungjan, переключение классов CSS лучше, так как оно отделяет код от дизайна.
Все забыли о addEventListener ? Объедините функции или используйте это дважды.
@sqykly нет, я не забыл. Смотри мой ответ
Я не верю, что это проблема здесь. Это проблема его функций, а не их запуска.
Да, у него есть черный фон. Посмотри на css. Также это id = "свет"
@mplungjan Да, у него черный фон, но он не будет в .styles . Вы можете получить доступ только к свойствам стиля, которые были установлены с помощью атрибута style (если только вы не извлекаете вычисленные стили). Также спасибо, я #light свой ответ с #light
Посмотрите на .start-button-light в таблице стилей
Посмотрите этот пример, @mplungjan codepen.io/anon/pen/RYEPpG
Что я должен увидеть? Что такое обсуждение? Круг был черным и не нужно синхронизировать
Фон не может быть прочитан изначально, потому что он установлен в таблице стилей, а не в строке. Из-за этого при первом щелчке фон становится черным через JS, это означает, что его можно прочитать при следующем щелчке, и тогда он будет отображать золото. Это означает, что он не совпадает с отображением раскрывающегося списка. Плохой выбор формулировки с моей стороны с «синхронизацией». @mplungjan
Ах, теперь я понимаю - мой ответ не волнует, поэтому я изначально не понял, что вы имели в виду!
Тем не менее, тест! = Золото, которое верно
Да, именно :) Извините за мое плохое объяснение
Но это делает ваш комментарий недействительным. Если это! = Gold для начала, скрипт установит значение в gold, а затем скрипт установит его в черный цвет - здесь нет ничего несинхронизированного
Давайте продолжим эту дискуссию в чате .

Jin Thakur · Accepted Answer · 2018-09-18T17-18-00.000Z

Просто скомбинируйте код для обоих и используйте одну функцию, используя новый 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>

спасибо Джин Тхакур за вашу помощь, я выбираю ваш путь