adeel_s adeel_s - 28 days ago 21
HTML Question

return to default check box after change

I am working on drawing app. I have 2 tools(pencil and eraser) and some colors.
Now when i check the pencil i can select a color but when i check the eraser and i want to select a color, i want to check the pencil tool again but instead the eraser tool stays selected.

Any guidance is much appriciated.

Here is an example and the 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'];

for (var i = 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');
}
};

Answer

Not sure if I understood your question correctly, so I'll try to rephrase it.

If eraser is selected and the user selects some color, you want the pencil tool to be selected automatically? So that the user wouldn't draw with the eraser?

If so, then you should probably modify your setSwatch method to check if the selected tool is, in fact, the pencil tool. If not, you might want to select it. There are many ways to do that, here's one of them:

function setSwatch(e) {
    //identify swatch
    var swatch = e.target;

    //ensure that pencil is selected
    if (tool !== 'pencil') {
        //just not sure which browsers support this
        //also, this is not very good, since you'll
        //switch color twice, so consider refactoring
        document.getElementById('pencil').click();
    }

    //set color
    setColor(swatch.style.backgroundColor);

    //give active class
    swatch.className += ' activeSwatch';
}