I have to tried to examine and make correction repeatedly on my code but it's still not printing the sentence when I run the it on the browser. Everythings seems to right to me but have no idea why the 'para.textContent' part is not printing ? The following are my code :
<body>
<label for="weather"> Select weather type today: </label>
<select id="weather">
<option value=""> --Make a choice--</option>
<option value="sunny"> Sunny </option>
<option value="rainy"> Rainy </option>
<option value="snowing"> Snowing </option>
<option value="overcast"> Overcast </option>
</select>
<p></p>
<script>
const select = document.querySelector('select');
const para = document.querySelector('p');
select.addEventListener('change', setWeather);
function setWeather() {
const choice = select.value ;
switch (choice) {
case 'sunny' :
para.textContent = 'It is a beautiful day today ! Let\'s go to the park, take a walk outside !';
break;
case 'rainy' :
para.textContent = 'It\'s rainy outside. Don\'t forget to bring an umbrella if you want to walk outside.;
break;
case 'snowing' :
para.textContent = 'It\'s snowing outside. Just stay at home, sit by the window, sip your tea while reading book and watch outside.' ;
break;
case 'overcast' :
para.textContent = 'It isn\'t raining, but the sky is grey and gloomy, it could turn any minute, so take a rain coat just in case.';
break;
default :
para.textContent = ''';
}
}
</script>
</body>
You had not used quotes properly hence you were getting error. Try to use double quotes "" just to make the code more legibile.
const select = document.querySelector('select');
const para = document.querySelector('p');
select.addEventListener('change', setWeather);
function setWeather() {
const choice = select.value;
switch (choice) {
case 'sunny':
para.textContent = "It is a beautiful day today ! Let\'s go to the park, take a walk outside !";
break;
case 'rainy':
para.textContent = "It\'s rainy outside. Don\'t forget to bring an umbrella if you want to walk outside.";
break;
case 'snowing':
para.textContent = "It\'s snowing outside. Just stay at home, sit by the window, sip your tea while reading book and watch outside.";
break;
case 'overcast':
para.textContent = "It isn\'t raining, but the sky is grey and gloomy, it could turn any minute, so take a rain coat just in case.";
break;
default:
para.textContent = '';
}
}<body>
<label for="weather"> Select weather type today: </label>
<select id="weather">
<option value=""> --Make a choice--</option>
<option value="sunny"> Sunny </option>
<option value="rainy"> Rainy </option>
<option value="snowing"> Snowing </option>
<option value="overcast"> Overcast </option>
</select>
<p></p>
</body>