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