我(尝试)有一张表,该表可以根据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代替数组元素
  • 使用onload函数
  • domObj是一个节点列表,因此它也不起作用: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
        });
      }
    }
    
    然后当您传入(this)时,此方法将起作用
    val = domobj.querySelector("input").value;
    
    2020年更新
    window.addEventListener("load",function() {
      [...document.querySelectorAll(".JS")].forEach(function() {
        this.addEventListener('click', function() {
            switch_JS(this);
        });
      })
    })
    
    但我建议您委托(delegate)到最近的静态容器

    09-16 16:54