时间戳

首页 > 解决方案 > 将值传递给函数返回 null - vanilla javascript

javascript - 将值传递给函数返回 null - vanilla javascript

问题描述

我正在尝试显示特定的 json 信息。每个 Main 类别都有自己的 Json 文件，该文件由sub-categories组成。目前我能够显示整个 json 文件，但现在我正在尝试编写一个只显示clicked sub-categorie的函数。

我试图通过将事件侦听器绑定到子类别菜单按钮来实现这一点。HTML结构：

Main category 1 (wrapper)
   Main button (id - category)
   Sub button 1(id - subcategory) (class="sub-sub")
   Sub button 2(id - subcategory) (class="sub-sub")
   etc
Main category 2 (wrapper)
   Main button (id - category)
   Sub button 1(id - subcategory) (class="sub-sub")
   Sub button 2(id - subcategory) (class="sub-sub")
   etc

这个想法是，当您单击子类别按钮时，它会返回到包装器 ( parentNode)，然后获取idie firstChild。主按钮。然后应该检索正确的 json 文件，但只显示所需的类别。

我实际上还没有走到那一步。我目前收到一个错误：TypeError: document.getElementById(...) is null

让我指出，我已尝试将所有内容包装到一个自执行函数中，并且在文档末尾附加了 javascript。

错误指向：let main_category = document.getElementById(clicked_sub_id).parentNode.firstChild(this.id);......所以clicked_sub_id是空的。

为什么以及如何纠正这一点。

谢谢您的帮助。

var subsub = document.querySelectorAll(".sub-sub");
var sub_btn = Array.from(subsub);
for (var i = 0; i < sub_btn.length; i++){
    sub_btn[i].addEventListener("click", SubAjax(this.id));
}

function SubAjax(clicked_sub_id){
    let main_category = document.getElementById(clicked_sub_id).parentNode.firstChild(this.id);
    RunAjax(main_category, this.id);
}

<div class="col-12 sub-main">
    <div class="first" id="box" value="box">
        <div>
            Box
        </div>
    </div>
    <div class="sub-sub" id="b_small" value="b_small">
        <div>
            Small Box
        </div>
    </div>
    <div class="sub-sub" id="b_medium" value="b_medium">
        <div>
            Medium Box
        </div>
    </div>
    <div class="sub-sub" id="b_large" value="b_large">
        <div>
            Large Box
        </div>
    </div>
</div>

标签： javascripthtml

解决方案

解决了。

var subsub = document.querySelectorAll(".sub-sub");
var sub_btn = Array.from(subsub);
for (var i = 0; i < sub_btn.length; i++){
    sub_btn[i].addEventListener("click", function(e) { SubAjax(e.target.id} ); //changed
}

function SubAjax(clicked_sub_id){
    let main_category = document.getElementById(clicked_sub_id).parentNode.firstElementChild.id; //changed
    RunAjax(main_category, this.id);
}

推荐阅读