Change the onchange function execution of the select tag to an onclick function on a button

-1

In the code below the function is executed in the onchange="timesquare(this)" event of the select tag. How to replace this event with an onclick event on a <button onclick="???????????;">Converter</button> button

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 onchange="timesquare(this)" id="optionsTime">
<option></option>
	<option id="minutes">Minutos</option>
	<option id="hours">Horas</option>
	<option id="teste">Teste</option>
</select>
<br>
<span id="resultTime"></span>
    
asked by anonymous 05.08.2017 / 19:22

2 answers

3

You can do the following example:

<input type="text" id="convert" placeholder="Insira os segundos">
<br>
<button id="converter">Converter</button>
<select id="optionsTime">
<option></option>
    <option id="minutes">Minutos</option>
    <option id="hours">Horas</option>
    <option id="teste">Teste</option>
</select>
<br>
<span id="resultTime"></span>

In javascript just catch the event onclick example:

document.getElementById("converter").onclick = function() {
    timesquare(document.getElementById("optionsTime"));

};

To implement this solution, you simply remove the onclick attribute from the select, change the above Html and javascript looks like this:

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;
  } 
}

You have the online example here working link

    
05.08.2017 / 19:35
1

To respond literally to the questioner you can put in onclick in <button> and call same function passing instead of this the corresponding element. As it is now in another tag this no longer applies and we have to go get the element with getElementById :

<button onclick="timesquare(document.getElementById('optionsTime'));">Converter</button>

What would look like this:

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"> <!-- sem o onchange aqui para ser perceber melhor-->
    <option></option>
	<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>

Best however would be to do as 13dev did and assign the onclick directly to javascript.

    
05.08.2017 / 19:51