[英]passing this.id to another function returns null error
I am trying to pass an ID with a function to another function.我正在尝试将带有 function 的 ID 传递给另一个 function。 The console then informs me that there is a
TypeError: document.getElementById(...) is null
.然后控制台通知我有一个
TypeError: document.getElementById(...) is null
。 The javascript file is appended at the end and I also tried adding the code into a self executing function, but that didn't solve the problem. javascript 文件附加在末尾,我还尝试将代码添加到自执行 function 中,但这并没有解决问题。
Basically I would like to an addEventListener
to the sub-category divs (buttons) and they should pass their value to another function.基本上我想为子类别 div(按钮)添加一个事件监听器,它们应该将它们的值传递给另一个
addEventListener
。
The error is pointing at this line let mainCategory = document.getElementById(recived_value).parentNode.firstChild(this.id);
错误指向这一行
let mainCategory = document.getElementById(recived_value).parentNode.firstChild(this.id);
so recived_value
is null .所以
recived_value
是null 。
Any help would be welcome.欢迎任何帮助。 Thank you.
谢谢你。
HTML: HTML:
<div class="wrapper">
<div class="main-category" id="box">
Boxes
</div>
<div class="sub-category" id="b_small">
Small Boxes
</div>
<div class="sub-category" id="b_medium">
Medium Boxes
</div>
<div class="sub-category" id="b_large">
Large Boxes
</div>
</div>
JS: JS:
var subCategoryClass = document.querySelectorAll(".sub-category");
var subCategoryArray = Array.from(subCategoryClass);
for ( let i = 0; i < subCategoryArray.length; i++ ){
subCategoryArray[i].addEventListener("click", PassValue(this.id));
}
function PassValue(recived_value){
let subCategory = recived_value;
let mainCategory = document.getElementById(recived_value).parentNode.firstChild(this.id);
TwoArgFunc(mainCategory, subCategory);
}
There were a couple of problems.有几个问题。 I described them below in // comments.
我在下面的//评论中描述了它们。
Edit: Based on your comment, I changed to a normal function definition.编辑:根据您的评论,我更改为普通的 function 定义。
var subCategoryClass = document.querySelectorAll(".sub-category"); var subCategoryArray = Array.from(subCategoryClass); for ( let i = 0; i < subCategoryArray.length; i++ ){ subCategoryArray[i].addEventListener("click", function(ev) { PassValue(ev.target.id)} ); // need a function here, not just a statement } function PassValue(recived_value){ console.log(recived_value); let subCategory = recived_value; let mainCategory = document.getElementById(recived_value).parentNode.firstElementChild.id; // use firstElementChild because firstChild is a newline text node console.log(mainCategory); // TwoArgFunc(mainCategory, subCategory); }
<div class="wrapper"> <div class="main-category" id="box"> Boxes </div> <div class="sub-category" id="b_small"> Small Boxes </div> <div class="sub-category" id="b_medium"> Medium Boxes </div> <div class="sub-category" id="b_large"> Large Boxes </div> </div>
Above PassValue
function put:以上
PassValue
function 放:
var that = this;
And then in your PassValue
function pass that.id
:然后在您的
PassValue
function 中传递that.id
:
... .firstChild(that.id);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.