In addition to the MarceloBoni suggestion "nos options do select, troque id para value..."
You can also run the code with ids in the options. See
document.getElementById("converter").onclick = function() {
timesquare(document.getElementById("optionsTime"));
};
function timesquare(s) {
var optionsTime = (s[s.selectedIndex].id);
var convert = document.getElementById('convert').value;
if (convert < 60) {
document.getElementById('resultTime').innerHTML = "Escolha um valor acima de 60";
return;
}
switch(optionsTime){
case "minutes":
document.getElementById('resultTime').innerHTML = 'Vc escolheu minutos';
break;
case "hours":
document.getElementById('resultTime').innerHTML = 'Vc escolheu Horas';
break;
default:
document.getElementById('resultTime').innerHTML = "no result";
break;
}
}
<input type="text" id="convert" placeholder="Insira os segundos">
<br>
<button id="converter">Converter</button>
<select id="optionsTime">
<option id="minutes">Minutos</option>
<option id="hours">Horas</option>
<option id="teste">Teste</option>
</select>
<br>
<span id="resultTime"></span>
In the example above javascript should be placed after HTML.
function timesquare(s) {
var optionsTime = (s[s.selectedIndex].id);
var convert = document.getElementById('convert').value;
if (convert < 60) {
document.getElementById('resultTime').innerHTML = "Escolha um valor acima de 60";
return;
}
switch(optionsTime){
case "minutes":
document.getElementById('resultTime').innerHTML = 'Vc escolheu minutos';
break;
case "hours":
document.getElementById('resultTime').innerHTML = 'Vc escolheu Horas';
break;
default:
document.getElementById('resultTime').innerHTML = "no result";
break;
}
}
<input type="text" id="convert" placeholder="Insira os segundos">
<br>
<select id="optionsTime">
<option id="minutes">Minutos</option>
<option id="hours">Horas</option>
<option id="teste">Teste</option>
</select>
<br>
<button onclick="timesquare(document.getElementById('optionsTime'));">Converter</button>
<span id="resultTime"></span>
The two examples above make use of the selectedIndex property - get or set the index that specifies the currently selected item, in this case the id .
Before giving another example, I'll tell you a bit more about this property SelectedIndex
When a user clicks on a pick in a pick list, the SelectedIndex quent property changes to a zero-based number corresponding to the position of that item in the list. The first item has a value of 0. This information is valuable for a script that needs to extract the value or text of a selected item for further processing.
You can also run the code with values in the options. See
-
example 3 with
[s.selectedIndex].value)
function timesquare(s) {
var optionsTime = (s[s.selectedIndex].value);
var convert = document.getElementById('convert').value;
if (convert < 60) {
document.getElementById('resultTime').innerHTML = "Escolha um valor acima de 60";
return;
}
switch(optionsTime){
case "minutes":
document.getElementById('resultTime').innerHTML = 'Vc escolheu minutos';
break;
case "hours":
document.getElementById('resultTime').innerHTML = 'Vc escolheu Horas';
break;
default:
document.getElementById('resultTime').innerHTML = "no result";
break;
}
}
<input type="text" id="convert" placeholder="Insira os segundos">
<br>
<select id="optionsTime">
<option value="minutes">Minutos</option>
<option value="hours">Horas</option>
<option value="teste">Teste</option>
</select>
<br>
<button onclick="timesquare(document.getElementById('optionsTime'));">Converter</button>
<span id="resultTime"></span>
And to finish, without id and without value in the options, by the text corresponding to the option
-
Example 4 with
[s.selectedIndex].text)
function timesquare(s) {
var optionsTime = (s[s.selectedIndex].text);
var convert = document.getElementById('convert').value;
if (convert < 60) {
document.getElementById('resultTime').innerHTML = "Escolha um valor acima de 60";
return;
}
switch(optionsTime){
case "Minutes":
document.getElementById('resultTime').innerHTML = 'Vc escolheu minutos';
break;
case "Horas":
document.getElementById('resultTime').innerHTML = 'Vc escolheu Horas';
break;
default:
document.getElementById('resultTime').innerHTML = "no result";
break;
}
}
<input type="text" id="convert" placeholder="Insira os segundos">
<br>
<select id="optionsTime">
<option>Minutos</option>
<option>Horas</option>
<option>Teste</option>
</select>
<br>
<button onclick="timesquare(document.getElementById('optionsTime'));">Converter</button>
<span id="resultTime"></span>
Conclusion
Your error was not due to using id or value in the options but rather how to make javascript retrieve this information.
I hope you have understood and I take this opportunity to ask you. What% of what would you do with the selected item?
