htmlで3つの場合の切り替えボタンを作成する方法

Question

htmlで3つの場合にスイッチボタンを作成することができますかと尋ねます。私が左に切り替えると、条件1が真です。私が右に切り替えると、条件2が真です。中間点では、2つの条件が当てはまります。私はこの種のスイッチを持って、常に少なくとも1つの条件が真であることを確認したいと思っています。

アイデアはありますか？どうもありがとうございます！純粋なHTML/CSSで

Answer 1

document.addEventListener('DOMContentLoaded', BtnCtrl); 
 
function BtnCtrl() { 
 
    var self = this; 
 
    var btns = document.querySelectorAll('.btn'); 
 
    
 
    //Just Set Defaults 
 
    var conditionA = true; 
 
    var conditionB = true; 
 
    
 
    self.syncDOM = function() { 
 
    document.getElementById('result').innerHTML = 'ConditionA: ' + conditionA + '; ConditionB:' + conditionB; 
 
    }; 
 
    
 
    self.onBtnClick = function(event) { 
 
    var condition = ((this.dataset || {}).condition || '').toLowerCase(); 
 
    
 
    switch(condition) { 
 
     case 'a': 
 
     conditionA = true; 
 
     conditionB = false; 
 
     break; 
 
     
 
     case 'b': 
 
     conditionB = true; 
 
     conditionA = false; 
 
     break; 
 
     
 
     default: 
 
     conditionA = true; 
 
     conditionB = true; 
 
    } 
 
    
 
    console.log('isValid ConditionA', conditionA); 
 
    console.log('isValid ConditionB', conditionB); 
 
    self.syncDOM(); 
 
    }; 
 

 
    self.syncDOM(); 
 
    for(var i = 0, btn; i < btns.length; i++) { 
 
    btn = btns[i]; 
 
    btn.addEventListener('click', self.onBtnClick.bind(btn)); 
 
    } 
 
}

#result { background: lightcoral; padding: 1em; margin: 5px; border: 1px solid red; }

<button class="btn" id="btnLeft" data-condition="a">LEFT</button> 
 
<button class="btn" id="btnMiddle">MIDDLE</button> 
 
<button class="btn" id="btnRight" data-condition="b">RIGHT</button> 
 

 
<div id=result></div>