I am attempting to deactivate the selection when any of the "color1, color2, or color3" buttons are chosen. I desire it to be activated only when the "color4" radio button is selected. After consulting various sources, integrating it into my code has left me confused.
Below is my HTML:
<br> <input type="radio" id="color1" name="color" value="orange" onchange="display()" />
<br> <input type="radio" id="color2" name="color" value="white" onchange="display()" />
<br> <input type="radio" id="color3" name="color" value="red" onchange="display()" />
// When checked, the select must be enabled
<br> <input type="radio" id="color4" name="color" value="other" onchange="display()" />
<select id="other_color" onchange="display()" />
<option value="black">black</option>
<option value="pink">pink</option>
<option value="green">Green</option>
</select>
<div id="color_display" height="100px" width="100px"></div>
Now for my JavaScript:
function display(){
if(document.getElementById('color1').checked){
document.getElementById('color_display').innerHTML = " Orange";
}
if(document.getElementById('color2').checked){
document.getElementById('color_display').innerHTML = " White";
}
if(document.getElementById('color3').checked){
document.getElementById('color_display').innerHTML = " Red";
}
if (document.getElementById('other_color').value == 'black') {
document.getElementById('color_display').innerHTML = " Black";
}
if (document.getElementById('other_color').value == 'pink') {
document.getElementById('color_display').innerHTML = " Pink";
}
if (document.getElementById('other_color').value == 'green') {
document.getElementById('color_display').innerHTML = " Green";
}
}
I have excluded the "color4" since it does not display anything. I intend for it to activate the selection. Do you think I should modify the existing JS or create a new one for this? I am unsure where to begin.