クリックしたラジオだけをクリックしてバックグラウンドの色を変更してください。

Question

jQueryを使用して、jQueryをプロジェクトに追加したくないということを知りました。

ブロックの内側にあるラジオボタンをクリックしたときにブロックの背景色を変更したいとします。純粋なJavascriptのみでお願いします。

私はまだそれが動作しない理由がわからないコードはここにあります。

<style> 
 
    .radio-active { 
 
    background-color: $primaryColor; 
 
    color: $whiteColor; 
 
    } 
 
</style> 
 

 
<ul> 
 
    <li id="label"> 
 
    <input id="rad" type="radio" name="rad" onclick="changeColor()"> 
 
    <label class="radio-label" for="f-option">£25</label> 
 
    </li> 
 
</ul> 
 

 
<script> 
 
    function changeColor() { 
 
    document.getElementById('label').className += "radio-active"; 
 
    console.log('hiiiiiiiii'); 
 
    } 
 

 
    function init() { 
 
    document.getElementById("rad").onclick = changeColor; 
 
    } 
 

 
    window.onload = init(); 
 
</script>

Answer 1

それはあなたの関数を呼び出すだけではなく、それはwindow.onload用のコールバックであることを割り当てているので、あなたのinit関数は、要素がレンダリングされる前に実行されていることが可能です。

のでwindow.onload = init();はwindow.onload = init;

編集になる必要があります。また、（$primaryColorのような）色変数がどこにも宣言されていないので、あなたのCSSは（静かに）失敗している可能性があります。 red、blueのような通常の色で試してみてください。

他の理由でスタイルが表示されないことがあります。 display: none;のようなもっと極端なスタイルルールで試してみてください。

はまた、kukkuzのようなクラス（className += "radio-active"）の追加（あなたが前後に切り替えたい場合は）そのメソッドを使用してちょうど=ない+=で行う、またはしなければならない、と述べました。あなただけのJSとまったくCSSを使用したい場合、あなたはそのようcssStringを設定することができます

function changeColor() { 
 
    document.getElementById('label').className += "radio-active"; 
 
}

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<ul> 
 
    <li id="label"> 
 
    <input id="rad" type="radio" name="rad" onclick="changeColor()"> 
 
    <label class="radio-label" for="f-option">£25</label> 
 
    </li> 
 
</ul>

：

を

Answer 2

あなたははclass属性にを追加していて、2回をクリックした後、それは次のようになります。その代わり

radio-activeradio-active 

することができますclassListトグル - デモ下記参照：

私はcheckboxをここのタスクに適していると考えています。

function changeColor() { 
 
    document.getElementById('label').classList.toggle("radio-active"); 
 
} 
 

 
function init() { 
 
    document.getElementById("rad").onclick = changeColor; 
 
} 
 

 
window.onload = init();

.radio-active { 
 
    background-color: lightblue; 
 
    color: white; 
 
}

<ul> 
 
    <li id="label"> 
 
    <input id="rad" type="checkbox" name="rad" onclick="changeColor()"> 
 
    <label class="radio-label" for="f-option">£25</label> 
 
    </li> 
 
</ul>

Answer 3

あなたはこのようなあなたのコードを簡素化することができます

function changeColor() { 
 
    var cssString = 'background-color: black; color: white;' 
 
    document.getElementById("label").style.cssText = cssString; 
 
}

<ul> 
 
    <li id="label"> 
 
    <input id="rad" type="radio" name="rad" onclick="changeColor()"> 
 
    <label class="radio-label" for="f-option">£25</label> 
 
    </li> 
 
</ul>

Answer 4

<style> 
 
    .radio-active { 
 
    background-color: red; 
 
    color: white; 
 
    } 
 
</style> 
 

 
<ul> 
 
    <li id="my_label"> 
 
    <input id="rad" type="radio" name="rad" onclick="changeColor()"> 
 
    <label class="radio-label" for="f-option">£25</label> 
 
    </li> 
 
</ul> 
 

 
<script> 
 
    var changeColor = function() { 
 
    document.getElementById("my_label").classList.add("radio-active"); 
 
    } 
 

 
</script>