0

I have a master and a slave set of radio buttons. Setting the master radio sets the slave with JavaScript. Setting the slave only sets the slave.

I've set up an event listener on change for the slave to trigger a function but it's only firing when the user changes it manually, not when it's set by the master. I would like the function to run whenever the slave is set either by user or master.

Are event listeners only set up to listen for user actions? How can I make it work?

I've set up my example here https://jsfiddle.net/taok9edr/2/

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

                  
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
dust
  • 131
  • 1
  • 9
  • 1
    Changing the state programatically does not trigger the events, you'd have to trigger the event handler yourself, and it's as easy as -> **https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events** – adeneo May 31 '15 at 11:27
  • Thanks. I'll check it out – dust May 31 '15 at 11:40
  • Or, you use `slave.onchange();` after `setSlave(colorValue);` http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually – user3735633 May 31 '15 at 12:12

0 Answers0