我(尝试)有一张表，该表可以根据RGB值切换背景颜色，其中表的每一行都有可点击的<td> s，它们加起来就是RGB值(例如，第一行是+ / -123，第二行为+/- 123。
＃2 :当前遇到的问题是，当我尝试将DOM对象从我的侦听器创建的for循环传递给switch_JS' function, the DOM that is being passed in domobj`时，是不确定的。
然后，我想每次用户单击时在<td>内切换隐藏输入的值，并定义一个单独的函数(可能不在JS中)将它们加起来并基于该颜色渲染rgb颜色。
就像我说的，，实际的问题在上面是＃2 ，但任何其他帮助将不胜感激。一般来说，我对编程非常陌生，这主要是为了我自己的学习。
<script>
var JS_elements = document.getElementsByClassName("JS")
for (y = 0; y < JS_elements.length; y++){
x = JS_elements[y].getElementsByTagName("input")[0]
alert(String(x.value)) **this loop runs 3 times, and puts 'false' to the alert pop-up each time
JS_elements[y].addEventListener('click', function() {
switch_JS(JS_elements[y].getElementsByTagName("input")[0]);
});
function testfunc() {
alert("TestFunc");
}
function true_switch(val) {
document.getElementById("testblock").innerHTML += "true_switch worked; "; <!-- debug line -->
if (val == true) {
return false;
} else if (val == false) {
return true;
} else {
alert("Error #475989 in function true_switch");
}
}
function switch_JS(domobj) {
<!-- takes as input an HTML object, and switched the value from true to false, or from false to true -->
document.getElementById("testblock").innerHTML = document.getElementById("testblock").innerHTML + "Step 1 worked; "; <!-- debug line -->
alert(String(domobj)); <!-- debug line -->
val = domobj.querySelector("input").value;
document.getElementById("testblock").innerHTML += "Step 2 worked; "; <!-- debug line -->
if ((typeof val) != Boolean) {
alert("Error, non-boolean passed into switch_JS");
document.getElementById("testblock").innerHTML += "1st if worked; ";
} else {
domobj.querySelector("input").value = true_switch(HTML.value);
document.getElementById("testblock").innerHTML += "else worked; "; <!-- debug line -->
}
}
</script>
HTML:
<body>
<div id="testblock">Testblock: </div>
<header>
<hr>
<p>- Header Background Color Controller -</p>
<table>
<tr>
<td>Javascript Controller:</td>
<td class="JS">Red
<input type="hidden" value='false'>
</td>
<td class="JS">Green
<input type="hidden" value='false'>
</td>
<td class="JS">Blue
<input type="hidden" value='false'>
</td>
</tr>
<tr>
<td>jQuery Controller:</td>
<td class="jQ" value=false>Red</td>
<td class="jQ" value=false>Green</td>
<td class="jQ" value=false>Blue</td>
<tr>
</table>
<hr>
</header>
<div class="main_div">
</div>
最佳答案
this代替数组元素val = domobj.querySelector("input").value; FIDDLE
window.onload=function() {
var JS_elements = document.getElementsByClassName("JS")
// why not use document.querySelectorAll(".JS");
for (y = 0; y < JS_elements.length; y++){
JS_elements[y].addEventListener('click', function() {
switch_JS(this); // do not use [y] here
});
}
}
val = domobj.querySelector("input").value;
window.addEventListener("load",function() {
[...document.querySelectorAll(".JS")].forEach(function() {
this.addEventListener('click', function() {
switch_JS(this);
});
})
})