当函数更改元素时如何在更改时触发事件?

时间:2015-05-31 11:26:18

标签: javascript html events javascript-events event-handling

所以我有一组主机和一组副单元。设置主无线电使用javascript设置从属设备。设置从站仅设置从站。

我已经设置了一个关于更改的事件监听器,以便从属设备触发一个功能,但它只在用户手动更改时触发,而不是在主设备设置时触发。我希望只要用户或主设备设置了从设备就能运行该功能。

事件监听器是否仅设置为侦听用户操作?我怎样才能使它发挥作用?

我在这里设置了我的例子http://www.regular-expressions.info/email.html

由于

HTML -

<form id="master">Master control: <br>
Red:<input id="red" class="color" type="radio" name="color" value="red" checked>
    Blue:<input id="blue" class="color" type="radio" name="color" value="blue">
</form>

    <form id="slave">Slave: <br>
Red:<input id="redSlave" type="radio" class="colorSlave" name="colorSlave" value="red" checked>
    Blue:<input id="blueSlave" type="radio" class="colorSlave" name="colorSlave" value="blue">
</form>

JS-

var color = document.getElementById('master').querySelectorAll('.color');
var colorValue = '';
var master = document.getElementById('master');
var slave = document.getElementById('slave');
function beep() {
for (i = 0; i < color.length; i++) {
    if (color[i].checked === true) {
    var colorValue = color[i].value;
//console.log(colorValue);
    }
}
    setSlave(colorValue);
}
function setSlave(value) {
   var slaveSelect = slave.querySelectorAll('.colorSlave');
    //console.log(slaveSelect);
    for (i = 0; i < slaveSelect.length; i++) {
        if (slaveSelect[i].checked === true && slaveSelect[i].value === value) {
            return;
        } else if (slaveSelect[i].checked === true && slaveSelect[i].value !== value) {
            //console.log(slaveSelect[i]);
            slaveSelect[i].checked = false;
            for (i = 0; i < slaveSelect.length; i++) {
                if (slaveSelect[i].value === value) {
                    slaveSelect[i].checked = true;
                }
            }
        }
    }
}
function boop() {
    console.log('slave has changed');
}
master.addEventListener("change", beep);

slave.addEventListener("change", boop);

0 个答案:

没有答案