Javascript用1同时执行两个功能（onclick事件）

时间：2018-09-18 17:13:33

标签： javascript function events

我需要通过一个onclick事件同时执行两个js函数 当我单击正方形时，会显示菜单，但同时，里面的圆圈会更改其颜色（此刻我必须单击两次），再次单击正方形时，菜单会消失，圆圈会再次更改为其默认值颜色。

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 :(得分：3)

定义一个新函数来调用这两个函数：

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

然后在onclick属性中使用onClick函数

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

答案 1 :(得分：0)

您的static async Task WhenAll(IEnumerable<Task> tasks, int maxThreadCount) { using (var guard = new SemaphoreSlim(initialCount: maxThreadCount)) { await Task.WhenAll(tasks.Select(async task => { await guard.WaitAsync(); return task.ContinueWith(t => guard.Release()); })); } } 函数未正确切换。 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;
}

答案 2 :(得分：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>

答案 3 :(得分：0)

这是您要查找的确切答案：

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>

答案 4 :(得分：0)

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>

相关问题
最新问题