Switch javascript always falling into default

Question

I’m studying js, I want to make a second converter in minutes and hours.

I was doing a test to see if everything is working 100% and I’ve come across a problem. I’ve been racking my brain for almost an hour. I wish someone would point out to me where I’m going wrong.

function timesquare()
	{
		var optionsTime = document.getElementById('optionsTime').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><br>

<select id="optionsTime">
	<option id="minutes">Minutos</option>
	<option id="hours">Horas</option>
	<option id="teste">Teste</option>
</select>

<br><br>

<button onclick="timesquare();">Converter</button>

<br><br>

<span id="resultTime"></span>

Answer 1

Beyond the suggestion of Marceloboni "nos options do select, troque id para value..."

It is also possible to execute the code with ids in the options. See

• example 1

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 above example javascript should be placed after HTML.

• example 2

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 property selectedIndex - obtains or defines the index that specifies the currently selected item, in this case the id.

Before giving another example I will talk a little more about this property SelectedIndex

When a user clicks on a choice in a selection list, the property SelectedIndex changes to a base number zero corresponding to the position of that item in the list. The first item has the value 0. This information is valuable for a script that needs to extract the value or text of a selected item for further processing.

It is also possible to execute code with values in 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 finally, no id and no value in 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>

Completion

Your error was not due to using id or value options and yes how to make javascript retrieve this information.

I hope you understood and I take this opportunity to ask you. And selectedIndex].text="NovoTexto" what you would do in the selected item?