-1

No código abaixo a função é executada no evento onchange="timesquare(this)" da tag select. Como substituir esse evento por um evento onclick em um botão <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 Respostas 2

3

Podes fazer da seguinte maneira exemplo:

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

no javascript só capturas o evento onclick exemplo:

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

};

para implementares esta solução baste removeres o atributo onclick do select, alterares o Html acima e o javascript ficara com este aspecto:

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

tens aqui o exemplo online a funcionar https://jsfiddle.net/95eont96/

3
  • basta alterares o HTML para o da resposta e adicionar o javascript que mencionei.
    – 13dev
    5/08/2017 às 17:51
  • resposta editada
    – 13dev
    5/08/2017 às 18:02
  • já esta tudo okay ? acontece ^^, na paz estamos cá para ajudar no que for preciso!
    – 13dev
    5/08/2017 às 18:27
0

Para responder literalmente ao perguntado pode colocar no onclick no <button> e chamar mesma função passando em vez de this o elemento correspondente. Como agora está noutra etiqueta o this já não se aplica e temos que ir buscar o elemento com o getElementById:

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

O que ficaria assim:

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>

Melhor no entanto seria fazer como o 13dev fez e atribuir o onclick diretamente pelo javascript.

2
  • Já que vc indica a resposta do 13dev vou escolher a dele como aceita :) pra vc +1 hehe
    – user60252
    5/08/2017 às 18:21
  • É de facto o mais correto, apenas respondi para ser literal com a pergunta, e complementar com a forma que estava a visualizar a chamada julgo eu. Eu também lhe dei o meu +1.
    – Isac
    5/08/2017 às 18:28

Você deve fazer log-in para responder a esta pergunta.