HTML como criar um botão que chame outro botão através do JS

Matheus Evandro Rech · 15 de maio de 2018

Ola eu estou criando uma pagina e nessa pagina ha um imagem, aonde eu criei um botão que troca essa imagem por outra. so que eu queria que esse botao que troca a imagem chama-se mais 2 botões e que cada um desses botões chama-se (cada um) uma imagem diferente.

esse é o codigo

<!DOCTYPE html>
<html>
<head>
<title>Oi</title>
<style>
h1#oquelediz {
   color : red;
   font-family: keep calm;
</style>
<body>
<center>
<h1 id="oquelediz">o que ele Diz na Foto ?</h1>

<img id="primeiro" src="link"><br>

<input type="button" onclick="botao1()" value="Clique Aqui">
</center>



<script>
function  botao1() {
    document.getElementById("primeiro").src = "link";                       
          }  
          
function nao() {
   document.getElementById("segundo").src = "link";
              }
              
function sim() {
   document.getElementById("terceiro").src = "link";
              }
</script>

</body>
</head>

a function botao1() é a que eu criei para mudar a imagem tem com fazer pra ela chamar 2 botões que um chama a "function nao()" e outro a "function sim()"

se for possível manda ai pf

DiF · 15 de maio de 2018

@Matheus Evandro Rech Mas você realmente precisa de botões?

Pode ser feito com links e javascript manipulando os mesmos.

Se tiver que ser com botões, você vai ter que gerar os novos botões com o javascript.

Matheus Evandro Rech · 15 de maio de 2018

eu criei mais dois botões e coloquei la e esntrui com uma escrita como fazer dai nao precisei mais

DiF · 15 de maio de 2018

@Matheus Evandro Rech Então tecnicamente você resolveu seu problema certo? Poderia nos informar melhor de como resolveu? Fazendo isso você vai ajudar outras pessoas com essa mesma dúvida.

Matheus Evandro Rech · 16 de maio de 2018

Na verdade eu estava treinando o JS e queria saber como eu fazia para um botão criar mais 2 botões depois de clicar, mais como estava com pouco tempo criei mais dois botões e instrui o usuário a como proceder.

o código ficou assim:

<!DOCTYPE html>
<html>
<head>
<title>Oi</title>
<style>
h1#oquelediz {
   color : red;
   font-family: keep calm;
   }

h3#oquelediz {
   color : red;
   font-family: keep calm;
   }
   
   
input#sim {
   color : red;
   font-family: keep calm;
   background: transparent;
   border: none;
   }
   
input#nao {
   color : red;
   font-family: keep calm;
   background: transparent;
   border: none;
   }
   
   
input#clique {
   color : red;
   font-family: keep calm;
   background: transparent;
   border: none;
   }
   
</style>
<body>
<center>
<h1 id="oquelediz">o que ele Diz na Foto ?</h1>

<img id="primeiro" src="https://i.imgur.com/XYJSSQZ.jpg"><br>

<input type="button" onclick="botao1()" value="Clique Aqui" id="clique">


<h3 id="oquelediz">depois de clicar no Botão acima escolha uma das opções abaixo e tire um print e me envie!!</h3><br>


<input type="button" onclick="sim()" value="Sim" id="sim">

<input type="button" onclick="nao()" value="Não" id="nao">

</center>

<script>

    
function  botao1() {
    document.getElementById("primeiro").src = "https://i.imgur.com/j6YrwBB.jpg";        
          }  
          
function nao() {
   document.getElementById("primeiro").src = "https://media.giphy.com/media/vGtrVt7hZrEdy/giphy.gif";
              }
              
function sim() {
   document.getElementById("primeiro").src = "https://media1.tenor.com/images/16ba6560250251ac31caaa111d9dc332/tenor.gif?itemid=9671130"
              }
</script>

</body>
</head>