javascript - return to default check box after change -

i working on drawing app. have 2 tools(pencil , eraser) , colors. when check pencil can select color when check eraser , want select color, want check pencil tool again instead eraser tool stays selected.

any guidance appriciated.

here example , code:

code:

html:

<!-- pencil & eraser --> <div class="graphic-tools">   <!-- <div id="pencil" class="pencil"></div> -->   <input checked="checked" id="pencil" type="radio" name="tool" value="pencil" />   <label class="tool pencil" for="pencil"></label>   <p class="">potlood</p>    <!-- <div id="eraser" class="eraser"></div> -->   <input id="eraser" type="radio" name="tool" value="eraser" />   <label class="tool eraser" for="eraser"></label>   <p>gum</p> </div>  <!-- colors --> <div id="colors" class="colors"></div> 

javascript:

// color swatches var colors = ['#000000', '#274e8d', '#6bb44b', '#e5cd46', '#e98b3a', '#d83538'];  (var = 0, n=colors.length; i<n; i++) {     var swatch = document.createelement('div');     swatch.classname = 'swatch';     swatch.style.backgroundcolor = colors[i];     swatch.addeventlistener('click', setswatch);     document.getelementbyid('colors').appendchild(swatch); }  function setcolor(color) {     context.fillstyle = color;     context.strokestyle = color;      var active = document.getelementsbyclassname('activeswatch')[0];      if (active) {         active.classname = 'swatch';     } }  function setswatch(e) {     //identify swatch     var swatch = e.target;     //set color     setcolor(swatch.style.backgroundcolor);     //give active class     swatch.classname += ' activeswatch'; }  setswatch({target: document.getelementsbyclassname('swatch')[0] });   // determine tool document.getelementbyid('pencil').onchange = function() {     if (this.checked) {         tool = 'pencil';         setswatch({target: document.getelementsbyclassname('swatch')[0] });     } }; document.getelementbyid('eraser').onchange = function() {     if (this.checked) {         tool = 'eraser';         setcolor('#ffffff');     } }; 

not sure if understood question correctly, i'll try rephrase it.

if eraser selected , user selects color, want pencil tool selected automatically? user wouldn't draw eraser?

if so, should modify setswatch method check if selected tool is, in fact, pencil tool. if not, might want select it. there many ways that, here's 1 of them:

function setswatch(e) {     //identify swatch     var swatch = e.target;      //ensure pencil selected     if (tool !== 'pencil') {         //just not sure browsers support         //also, not good, since you'll         //switch color twice, consider refactoring         document.getelementbyid('pencil').click();     }      //set color     setcolor(swatch.style.backgroundcolor);      //give active class     swatch.classname += ' activeswatch'; }