So, I've been trying to toggle a button text after selection an certain option.
However no matter what I try the button text doesn't change.
I have this HTML code:
<select id="temp">
<option value="selectOption" disabled selected>Select</option>
<option value="farenheit">Farenheit</option>
<option value="kelvin">Kelvin</option>
</select><br>
<button id="buttonTemp" onclick="converterTemp()">Convert</button><br>And this is the JS code:
const slt = document.querySelector('select');
switch (slt.value) {
case 'farenheit':
document.getElementById('buttonTemp').innerHTML = 'Convert to Fº';
break;
case 'kelvin':
document.getElementById('buttonTemp').innerHTML = 'Convert to kº';
break;
}It was supposed to toggle the text "Convert" to "Convert to Fº" / "Convert to Kº" on the user selection of Farenheit or Kelvin.
Could someone help me, please?
Put the switch code into an event listener, that listens for a change in the dropdown.
const slt = document.querySelector('select');
slt.addEventListener('change', () =>
{
switch (slt.value) {
case 'farenheit':
document.getElementById('buttonTemp').innerHTML = 'Convert to Fº';
break;
case 'kelvin':
document.getElementById('buttonTemp').innerHTML = 'Convert to kº';
break;
}
})<select id="temp">
<option value="selectOption" disabled selected>Select</option>
<option value="farenheit">Farenheit</option>
<option value="kelvin">Kelvin</option>
</select><br>
<button id="buttonTemp" onclick="converterTemp()">Convert</button><br>