javascript - 为什么 onClick 事件在 html 中只工作一次?

标签 javascript jquery html

我有以下 html 和 javaScript。 onclick showHiddenDiv 事件仅适用于第一个 <li> .

<!DOCTYPE html>
<html>
<body>
    <ul class="list">
        <li>
           <h3 class="assignments"><a href="#users" onclick="showHiddenDiv('div-1')">
           Assignment 1</a></h3>
           <p class="date">Tuesday Sep 9</p>
           <div id="div-1" style="display:none">Completed</div>
        </li>
        <li>
            <h3 class="assignments"><a href="#users" onclick="showHiddenDiv('div-2')">
             Assignment 2 </a></h3>
             <p class="date">Thursday Sep 11</p>
             <div id="id-2" style="display:none">Completed. 
             The web page can be found at this link.</a></div>
         </li>
     </ul>

<script>
function showHiddenDiv(id) {
  "use strict";
   var obj = document.getElementById(id);
   if (obj.style.display === "none") {
      obj.style.display = 'block';
   } else if (obj.style.display === "block") {
      obj.style.display = 'none';
  }
}
</script>
</body>
</html>

如何使用 onclick 调用 javaScript 函数以在 html 中多次工作?

最佳答案

   <div id="div-1" style="display:none">Completed</div>
            ^^^^---- spot the difference
     <div id="id-2" style="display:none">Completed. 
              ^^^^--- spot the difference

关于javascript - 为什么 onClick 事件在 html 中只工作一次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26019724/

相关文章:

javascript - 使用 javascript 提交表单并从其他页面接收表单

javascript - 固定高度容器内的两个流体高度 div

javascript - 调整未知尺寸和纵横比的图像大小

具有立即调用函数的 Javascript 提升过程 : Why doesn't this declared function run before function expression?

javascript - Jquery Slidetoggle 显示隐藏 一次一个 div

html - 将 div 定位在内容的左侧而不是页面的左侧

Javascript - 循环在执行模拟时无法正常工作

javascript - 未捕获的引用错误 : $ is not defined (Reactjs)

javascript - 有谁知道如何在本地存储由 javascript 函数所做的 css 更改?

html - 为什么 inline-flex/inline-grid 的行为与 contenteditable 中的 inline 不一致?