Question

我（尝试）有一个表可以根据RGB值切换背景颜色，其中表的每一行都有可点击的public class MainActivity extends ActionBarActivity { protected EditText textVoice; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getSupportActionBar().hide(); setContentView(R.layout.activity_main); this.textVoice = (EditText) findViewById(R.id.textVoice); TextToVoice textToVoice = new TextToVoice(); } ...... s，它们将加起来给出RGB值（例如，第一行是+/- 123，第二行是+/- 123。

＃2 ：我目前遇到的问题是，当我尝试将我的DOM对象从我的侦听器传递时，创建for循环到<td> domobj`是未定义的。

然后我想在每次用户点击时切换switch_JS' function, the DOM that is being passed in s内隐藏输入的值，并定义一个单独的函数（可能不在JS中）来添加它们并渲染一个rgb基于此的颜色。

正如我所说，真正的问题在于＃2 ，但任何其他帮助将不胜感激。我对编程很新，这主要是为了我自己的学习。

<td>

HTML：

<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>

Answer 1

关闭 - 使用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;

Answer 2

正如您在示例中所见，我为输入打印了2个控制台，为 i 打印了一个

所以你的问题是：

在侦听器功能中，您正在尝试访问 JS_elements [y] .childNodes 所以当时 Y 4 且你的Class Js数组长度 0-3 因为 for循环 Y会增加到4，因此未定义因为 JS_elements [4] 是没有出现在你的阵列中。

所以在
中使用this.chiledNode
看到这种解决方案：

工作示例：http://jsfiddle.net/kevalbhatt18/gqce9htx/

的
的
var input = document.querySelectorAll('input'); console.log(input) for(var i=0;i<input.length;i++){ input[i].addEventListener('input', function() { console.log(input) console.log(i) console.log('input changed to: ', this.value); }); }

的

在Javascript中传递DOM对象时未定义

2 个答案: