Each time the web page is loaded the onchange method works, but it only works once per value. When summer is selected the classes are added, when i chose winter the class is added but then if i chosesummer again it will not work. Why is this?
const landingBGR = document.querySelector(".landing-wrapper");
const landingBTN = document.getElementById("l-btn");
function selectedSeason(season) {
switch(season) {
case "summer":
landingBTN.setAttribute("href","summer.html");
landingBGR.classList.add("summer-bgr");
break;
case "winter":
landingBTN.setAttribute("href","winter.html");
landingBGR.classList.add("winter-bgr");
break;
}
}
<select name="" id="landing-drop" onchange="oninput(this.value)">
<option value="">Ireland in the four Seasons</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>
try to delete the old class when you select a new option.
landingBGR.classList.remove("summer-bgr");
landingBGR.classList.remove("winter-bgr");
you will maybe need
if(landingBGR.classList.contains("classname"))
I have a selectbox with a couple of options in it. When an option is selected, the Javascript code gets the value of the selected option and has to change the font of a text accordingly.
I figured I would use the Switch-Case statement because I have multiple options, but it doesn't seem to work, nothing changes.
Javascript
function font() {
var sf = document.getElementById('box').value;
var generate = document.getElementById('generate');
switch (sf) {
case 'TimesNewRoman':
generate.style.fontFamily('Times New Roman')
break;
case 'Georgia':
generate.style.fontFamily('Georgia')
break;
case 'PalatinoLinotype':
generate.style.fontFamily('Palatino Linotype')
break;
default:
generate.style.fontFamily('Arial')
}
}
HTML
<select id="box" onchange="font();">
<option id="TNR" value="TimesNewRoman">Times New Roman</option>
<option id="GRG" value="Georgia">Georgia</option>
<option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
</select>
<br />
<div id="generate">This is some text</div>
NOTE
I have more options in the list but I have shorten it for the sake of simplicity.
Am I wrong for using this statement, or am I missing something entirely?
You haven't made an assignment, use generate.style.fontFamily = "Arial";
So I have a div with text in it that changes when you select a different font in the select list that I made.
At the moment the list is pretty limited because I have to add fonts by myself.
Is there any way to add all the fonts installed on the users computer to the list with a code instead of having to add them all by myself?
HTML
<div id="generate">
Change the text!
</div>
<select id="box" onchange="font();">
<option id="PIC" value="Kies een font">Kies een font.</option>
<option id="TNR" value="TimesNewRoman">Times New Roman</option>
<option id="GRG" value="Georgia">Georgia</option>
<option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
<option id="ARL" value="Arial">Arial</option>
<option id="CMS" value="ComicSans">Comic Sans</option>
<option id="IMP" value="Impact">Impact</option>
<option id="TMS" value="TrebuchetMS">Trebuchet MS</option>
<option id="TSB" value="TheSansBlack">The Sans Black Plain</option>
</select><br />
Javascript
function font() {
var sf = document.getElementById('box').value;
var generate = document.getElementById('generate');
switch(sf){
case 'TimesNewRoman':
generate.style.fontFamily = ('Times New Roman')
break;
case 'Georgia':
generate.style.fontFamily = ('Georgia')
break;
case 'PalatinoLinotype':
generate.style.fontFamily = ('Palatino Linotype')
break;
case 'Arial':
generate.style.fontFamily = ('Arial')
break;
case 'ComicSans':
generate.style.fontFamily = ('Comic Sans MS')
break;
case 'Impact':
generate.style.fontFamily = ('Impact')
break;
case 'TrebuchetMS':
generate.style.fontFamily = ('Trebuchet MS')
break;
default: generate.style.fontFamily = ('')
}
}
You can check availability of particular font http://www.lalit.org/lab/javascript-css-font-detect/
One thing you can do is create own list and compare it's availability as mentioned in link above and show only fonts which are available on client system.
I want to execute a java script code when item selected from the drop list "jumpMenu"
javascript code:
function MM_jumpMenu(selObj){
switch(selObj.options[selObj.selectedIndex].value)
{
case 2:
document.getElementById("method2").style.display = 'none';
document.getElementById("method3").style.display = 'block';
break;
case 3:
document.getElementById("method3").style.display = 'none';
document.getElementById("method2").style.display = 'block';
break;
}
}
java script will affect this html code:
<div id="method2"></div>
<div id="method3"></div>
drop list:
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu(this)">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
update i should have used quotes "" with the switch cases
The property you are looking for is called selectedIndex.
selObj.options[selObj.selectedIndex].value
My JavaScript switch case isn't working for some reason, and I can't figure it out.
I am trying to display a certain input only of a certain option is chosen:
function showHideSchools(obj){
var curSel = obj.options[obj.selectedIndex].value
switch(curSel)
{
case '0-2':
document.getElementById('schools').style.display="none"
break;
case '3-5':
document.getElementById('schools').style.display="block"
break;
case '6-8':
document.getElementById('schools').style.display="block"
break;
case '9-11':
document.getElementById('schools').style.display="block"
break;
case '12-14':
document.getElementById('schools').style.display="block"
break;
case '15-16':
document.getElementById('schools').style.display="block"
break;
case '17-18':
document.getElementById('schools').style.display="block"
break;
case '19 and over':
document.getElementById('schools').style.display="block"
break;
default:
document.getElementById('schools').style.display="none"
}
}
Here is the HTML:
<p>
<label for="childrenAges">Ages of children still living at home: </label>
<select name="childrenAges" id="childrenAges" onchange="showHideSchools(this);">
<option>Select one</option>
<option value="0-2">0-2</option>
<option value="3-5">3-5</option>
<option value="6-8">6-8</option>
<option value="9-11">9-11</option>
<option value="12-14">12-14</option>
<option value="15-16">15-16</option>
<option value="17-18">17-18</option>
<option value="19 and over">19 and over</option>
</select>
</p>
<div id="schools" style="display:none">
<p>
<label for="schoolName">What school/s do they attend: </label>
<input type="text" name="schoolName" />
</p>
</div>
You don't need a switch case:
if(obj.options[obj.selectedIndex].value != "Select one" && obj.options[obj.selectedIndex].value != "0-2"){
document.getElementById('schools').style.display="block";
}else{
document.getElementById('schools').style.display="none";
}
As others said, your case tests didn't match the value of the first three options.
There isn't any reason to repeat that line document.getElementById('schools').style.display="block"; over and over. Just let all the conditions that lead to that outcome fall through to a single line with that instruction.
function showHideSchools (obj) {
var curSel = obj.options[obj.selectedIndex].value;
switch (curSel) {
case '2':
case '3':
case '9-11':
case '12-14':
case '15-16':
case '17-18':
case '19 and over':
document.getElementById('schools').style.display = "block";
break;
case '1':
default:
document.getElementById('schools').style.display = "none";
}
}
The value of the options 0-2, 3-5 and 6-8 are 1, 2 and 3, respectively.
You have them as 0-2, 3-5 and 6-8 in your JavaScript code.
0-2
3-5
6-8
case '0-2':
case '3-5':
Your values and case parameters do not correspond. When you select '0-2', .value is "1".
From your code, it looks like you'd be better off switching the criteria, so that you hide when the value is "" and show the box in all other cases - that looks like what you're trying to do...?
Other than that, I'm not 100% sure what your problem is, but if the problem is that it's not working for the first three items, then the reason is that their values will be 1, 2 and 3, not 0-2 etc, that you're testing for.
The case values are wrong. They have to match the value in the <option> tags, not the displayed text.
So they would be
case '1':
document.getElementById('schools').style.display="block"
break;
case '2':
document.getElementById('schools').style.display="block"
break;
etc.
You are not specifying the option values, rather their representation in switch. For example:
case '0-2':
There is nothing like that in the select's option values.
case '1':
...
case '2':
...
case '3':
...
case '9-11':
...
case '12-14':
...
I.e., you should check the content of option's value attribute, not text inside <option></option> tags.