I'm new to programming and wanted to learn some JavaScript logic. Currently, I know how to hide a div based on one option, but how can I hide it based on multiple? I have tried using doing document.getElementById(divId).style.display = element.value != 'None' && 'Refuse to answer' ? 'block' : 'none'; by using the && operator, but it didn't work. Thanks for your help in advance!
Current funtionality: Div shows for every option except None
Expected funtionality: Div shows for every option selected except None and Refuse to answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#hidden_div {
display: none;
}
</style>
</head>
<body>
<label>What is your favorite color?</label>
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="None">None</option>
<option value="Refuse to answer">Refuse to answer</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
<option value="White">White</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
</select>
<div id="hidden_div">
<p>hello</p>
</div>
</body>
<script type="text/javascript">
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value != 'None' ? 'block' : 'none';
}
</script>
</html>