javascript - 无法在一个地方读取undefined的属性切换，但在另一个地方可以使用

如果有人单击标题，我正在尝试一种扩展某些内容的方法。首先，我不得不“突出显示”被单击的元素，就像“购物清单”一样。我通过上一堂课来做到这一点，并且表现得很好。

在第二点，我应该单击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");
        });
    });

完整的错误消息：


  Uncaught TypeError：无法读取HTMLHeadingElement上未定义的属性“ toggle”。 （script.js：6）


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

我不仅要有解决方案，而且还想让某人向我解释问题是什么以及它是如何工作的，这样我就可以学习而不会再犯同样的错误。

最佳答案

问题出在您的elementAndToggle变量上。

在trainingType.forEach中，您引用页面中与querySelectorAll相匹配的每个元素。之后，立即将elementAndToggle的值设置为元素本身，并将字符串连接到该元素。这将导致变量的值成为[object HTMLElement]-toggle之类的字符串。

看起来您正在尝试检索每个元素的id，向其添加内容，然后根据其类查询类似的元素。您可以执行以下操作：

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