我试图写一个函数隐藏一个元素，显示另一个元素

Question

im试图编写一个函数，以便能够重现隐藏一个元素并使另一个元素出现的动作。我知道托尔(Thor(中有一些东西，但是我还没有在那里，所以只想用简单的JS解决它。

const changeDisplay = (elm1, elm2) => {
     let E1 = document.getElementById('elm1').style.display = 'none'
     let E2 = document.getElementById('elm2').style.display = 'block'
     return elm1.addEventListener('click', E1) &&
     elm1.addEventListener('click', E2)
   }
   changeDisplay('not', 'ok')

TypeError: document.getElementById(...) is null script.js:6:21

Answer 1

let E1 = document.getElementById('elm1').style.display = 'none'

这是因为该元素不存在而引发错误，这是因为您没有使用语法来创建函数。

您正在评估document.getElementById('elm1').style.display = 'none' 即时，并将评估的值分配给E1。

函数将是：

let E1 = function () { document.getElementById('elm1').style.display = 'none' };

Answer 2

在摘要中，您尝试访问elm1和elm2作为字符串，因此您应该删除'。您的最后一行AddeventListener是可疑的，我不明白您想做什么。

处理JS样式更改时的最佳实践是事先创建CSS类，并使用JS动态更改类。这样的东西：

const changeDisplay = (elm1, elm2) => {
     const E1 = document.getElementById(elm1);
     const E2 = document.getElementById(elm2);
     E1.className = 'display_none';
     E2.className = 'display_block';
     E1.addEventListener('click', /*FUNCTION*/);
     E2.addEventListener('click', /*FUNCTION*/);
   }
   changeDisplay('not', 'ok')

Answer 3

尝试使用下面的示例之类的代码来添加或删除将根据需要隐藏或显示您的元素的CSS类。

window.onload = function() {
 var items = document.querySelectorAll('.item');
 for (var i=0; i < items.length; i++ ){
  items[i].addEventListener('click', function(event) {
    for (var i=0; i < items.length; i++ ){
      items[i].classList.remove("hidden");
    }
    event.target.classList.add("hidden");
   });
 }
}

.hidden { display: none; }
.item { cursor: pointer; }

<ul>
  <li class="item">Item 1</li>
  <li class="item hidden" >Item 2</li>
</ul>