変更後にデフォルトのチェックボックスに戻る

Question

私は描画アプリを開発中です。私は2つのツール（鉛筆と消しゴム）といくつかの色があります。 鉛筆をチェックすると、色を選択できますが、消しゴムをチェックして色を選択したいときは、鉛筆ツールをもう一度チェックしたいのですが、消しゴムツールを選択したままにしておきます。

どのようなガイダンスにも多くの賛同があります。ここで

は一例とコードです：

コード：

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 1

わかりません私はそれを言い換えようとします。

消しゴムが選択されていて、ユーザーが色を選択した場合は、自動的に鉛筆ツールを選択しますか？ユーザーが消しゴムで描かないようにするには？

もしそうなら、実際には選択したツールが実際には鉛筆ツールであるかどうかを確認するために、おそらくsetSwatchメソッドを変更する必要があります。そうでない場合は、それを選択することができます。これを行う方法はたくさんありますが、その1つは次のとおりです。

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'; 
}