javascript - How to trigger event on change when function is changing element? -
so have master , slave set of radio buttons. setting master radio sets slave javascript. setting slave sets slave.
i've set event listener on change slave trigger function it's firing when user changes manually, not when it's set master. function run whenever slave set either user or master.
are event listeners set listen user actions? how can make work?
i've set example here https://jsfiddle.net/taok9edr/2/
thanks
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() { (i = 0; < 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); (i = 0; < 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; (i = 0; < 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);
Comments
Post a Comment