无法在一个地方读取未定义的属性切换，但在另一个地方工作

Question

如果有人点击标题，我正在尝试扩展一些内容。首先，我不得不将点击的元素“突出显示”为一种“购物清单”。我通过应用一个类来做到这一点并且工作得很好。

在第二个位置，我应该单击一个 h3 元素，然后通过应用一个类来扩展一个名称几乎相同的 div 元素。我将在下面展示示例，但问题是由于某种原因一切都未定义。

我认为未定义关键变量的原因可能是因为代码在 HTML 加载之前执行，所以我将它包装在 window.onload 中，这确实在第一位但不是第二位。

第一名，工作中

       <button class="btn-shop" id="almonds">Almonds</button>
       <button class="btn-shop" id="apple">Apple</button>
       <button class="btn-shop" id="argula">Argula</button>

window.onload = function(){
    var ingredientsArray = document.querySelectorAll("#almonds, 
    #argula, #apple");
    ingredientsArray.forEach(function(element){
        element.addEventListener("click", function(){
            element.classList.toggle("active-shop");
        });
    });
};

第二名，不工作

       <h3 id="reps">Reps</h3>
       <div class="reps-toggle noshow">
              <p>aaaaaaaaaaa</p>
       </div>
       <h3 id="timeinterval">Time Interval</h3>
       <div class="timeinterval-toggle noshow">
              <p>aaaaaa</p>
       </div>

window.onload = function(){
    var trainingType = document.querySelectorAll("#reps, #timeinterval, 
    #tabata");
    trainingType.forEach(function(element){
        element.addEventListener("click", function(){
            var elementAndToggle = element + "-toggle";
            elementAndToggle.classList.toggle("noshow");
        });
    });

完整的错误信息：

未捕获的类型错误：无法读取 HTMLHeadingElement 处未定义的属性“切换”。 (script.js:6)

尝试了 console.logging 一些变量。 所有值都未定义，trainingType、element、elementAndToggle。我不明白为什么。

我不仅希望有解决方案，而且希望有人能向我解释问题出在哪里以及它是如何工作的，这样我就可以学习并且不再犯同样的错误。

Answer 1

问题在于您的 elementAndToggle 变量。

在trainingType.forEach 中，您指的是页面中与您的querySelectorAll 匹配的每个元素。紧接着，您将elementAndToggle 的值设置为元素本身，并将一个字符串连接到它。这会导致变量的值变成像[object HTMLElement]-toggle 这样的字符串。

看起来您正在尝试检索每个元素的 id，向其附加一些内容，然后根据其类查询类似的元素。你可以这样做：

var elementAndToggle = element.id + "-toggle";
document.getElementsByClassName(elementAndToggle)[0].classList.toggle("noshow");