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");
        });
    });

完整的错误消息：

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

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

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

Answer 1

var elementAndToggle = element + "-toggle"是问题所在。

您正在尝试将字符串添加到元素，这将不起作用。尝试做var elementAndToggle = element.id + "-toggle";。这样，您将一起添加字符串以获得类名。

Answer 2

问题出在您的elementAndToggle变量上。

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

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

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

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

2 个答案: