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

Asked

Viewed 532 times

-1

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

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 only captures the event onclick example:

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

};

to implement this solution just remove the attribute onclick from select, change the Html above and the javascript will look 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;
  } 
}

here is the online example working https://jsfiddle.net/95eont96/

  • Just change the HTML to the response and add the javascript I mentioned.

  • edited response

  • already this all okay ? it happens , in peace we are here to help in whatever it takes!

0

To literally answer the question you can put in the onclick in the <button> and call same function passing instead of this the corresponding item. As it is now on another label the this no longer applies and we have to get the element with the 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>

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

  • Since you indicate the answer of 13dev I will choose his as accepted :) for you +1 hehe

  • It is in fact the most correct, I just answered to be literal with the question, and complement with the way I was visualizing the call I guess. I also gave you my +1.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.