0

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pergunta</title>
    <style>
        .carinha{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>1. Como você está se sentindo essa semana?</p>
    <img class="carinha" id="feliz" src="https://i.imgur.com/wGe2gWl.png">
    <input name="input" value="normal" id="input1" type="radio" onclick="change1()">
        
    <img class="carinha" id="normal" src="https://i.imgur.com/KDrepED.png">
    <input name="input" value="normal" id="input2" type="radio" onclick="change2()">
        
    <img class="carinha" id="triste" src="https://i.imgur.com/2Zdok8l.png">
    <input name="input" value="normal" id="input3" type="radio" onclick="change3()">
</body>
<script>
    function change1(){
        var image = document.querySelector("#feliz")
        image.src = "https://i.imgur.com/KL66BbQ.png"
    }

    function change2(){
        var image = document.querySelector("#normal")
        image.src = "https://i.imgur.com/3G2HVoJ.png"
    }

    function change3(){
        var image = document.querySelector("#triste")
        image.src = "https://i.imgur.com/w9G6PAW.png"
    }
</script>
</html>

Nesse código é possível fazer com que as três carinhas fiquem coloridas porém eu queria que ficasse uma por vez.

Como Faço para fazer as carinhas voltarem ao estado original depois de clicar em outro input?

1
  • pode colocar outra função, atribuindo as imagens originais à img e chamar essa função dentro de change1, change2 e change3 antes de atribuir a nova imagem
    – vik
    11/07/2019 às 18:05

4 Respostas 4

1

Você pode implementar da seguinte forma:

cria uma nova função javascript:

 function changeDefault(){
   document.querySelector("#feliz").src = 'https://i.imgur.com/wGe2gWl.png';
   document.querySelector("#normal").src = 'https://i.imgur.com/KDrepED.png';
   document.querySelector("#triste").src = 'https://i.imgur.com/2Zdok8l.png';
 }
 function change1() {
   changeDefault();
   // resto do codigo omitido
 }

Faça o mesmo para os outros metodos change que ira funcionar.

1

PRONTO! O que fiz foi criar outras funções chamando as respectivas imagens iniciais de acordo com o item clicado. Aí caso clique na carinha feliz, irá chamar as funções que irá voltar a imagem padrão das outras carinhas, e assim sucessivamente.

Espero que tenha entendido ;)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pergunta</title>
    <style>
        .carinha{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>1. Como você está se sentindo essa semana?</p>
    <img class="carinha" id="feliz" src="https://i.imgur.com/wGe2gWl.png">
    <input name="input" value="normal" id="input1" type="radio" onclick="change1()">
        
    <img class="carinha" id="normal" src="https://i.imgur.com/KDrepED.png">
    <input name="input" value="normal" id="input2" type="radio" onclick="change2()">
        
    <img class="carinha" id="triste" src="https://i.imgur.com/2Zdok8l.png">
    <input name="input" value="normal" id="input3" type="radio" onclick="change3()">
</body>
<script>

    function p1(){
        var image = document.querySelector("#feliz")
        image.src = "https://i.imgur.com/wGe2gWl.png"
    }

    function p2(){
        var image = document.querySelector("#normal")
        image.src = "https://i.imgur.com/KDrepED.png"
    }

    function p3(){
        var image = document.querySelector("#triste")
        image.src = "https://i.imgur.com/2Zdok8l.png"
    }

    function change1(){
        var image = document.querySelector("#feliz")
        image.src = "https://i.imgur.com/KL66BbQ.png"
        p2();
        p3();
    }

    function change2(){
        var image = document.querySelector("#normal")
        image.src = "https://i.imgur.com/3G2HVoJ.png"
        p1();
        p3();
    }

    function change3(){
        var image = document.querySelector("#triste")
        image.src = "https://i.imgur.com/w9G6PAW.png"
        p1();
        p2();
    }
</script>
</html>

0

Também tem essa forma.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pergunta</title>
    <style>
        .carinha{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>1. Como você está se sentindo essa semana?</p>
    <img class="carinha" id="feliz" src="https://i.imgur.com/wGe2gWl.png">
    <input name="input" value="normal" id="input1" type="radio" onclick="change1()">
        
    <img class="carinha" id="normal" src="https://i.imgur.com/KDrepED.png">
    <input name="input" value="normal" id="input2" type="radio" onclick="change1()">
        
    <img class="carinha" id="triste" src="https://i.imgur.com/2Zdok8l.png">
    <input name="input" value="normal" id="input3" type="radio" onclick="change1()">
</body>
<script>
    function change1(){
        var img_original = ["https://i.imgur.com/wGe2gWl.png","https://i.imgur.com/KDrepED.png", "https://i.imgur.com/2Zdok8l.png"];
        var img_colorida = ["https://i.imgur.com/KL66BbQ.png", "https://i.imgur.com/3G2HVoJ.png", "https://i.imgur.com/w9G6PAW.png"];

        var feliz = document.getElementById("feliz");
        var normal = document.getElementById("normal");
        var triste = document.getElementById("triste");
        
        var input1 = document.getElementById("input1");
        var input2 = document.getElementById("input2");
        var input3 = document.getElementById("input3");

        if (input1.checked == true) {
        feliz.src = img_colorida[0];
        normal.src = img_original[1];
        triste.src = img_original[2];
        }
        else if (input2.checked == true) {
        feliz.src = img_original[0];
        normal.src = img_colorida[1];
        triste.src = img_original[2];
        }
        else if (input3.checked == true) {
        feliz.src = img_original[0];
        normal.src = img_original[1];
        triste.src = img_colorida[2];
        }
    }
</script>
</html>

0

Você pode fazer de uma forma mais prática usando outros recursos, como o dataset, que é um atributo data-* e usar event handlers em vez de vários atributos onclick, evitando ainda várias funções e gambiarras.

Veja:

var radios = document.querySelectorAll("[name=input]");
var checado;
for(let x=0; x<radios.length; x++){
   radios[x].onclick= function(){

      if(checado && checado != this.value){
         var imagem_alt = document.getElementById(checado).src;
         document.getElementById(checado).src = document.getElementById(checado).dataset.alt;
         document.getElementById(checado).dataset.alt = imagem_alt;
      }
      
      if(!checado || checado != this.value){
         var imagem = document.getElementById(this.value);
         var imagem_src = imagem.src;
         imagem.src = imagem.dataset.alt;
         imagem.dataset.alt = imagem_src;
      }
      checado = this.value;

   }
}
.carinha{
   width: 50px;
   height: 50px;
}
<p>1. Como você está se sentindo essa semana?</p>
<img class="carinha" id="feliz" data-alt="https://i.imgur.com/KL66BbQ.png" src="https://i.imgur.com/wGe2gWl.png">
<input name="input" value="feliz" type="radio">

<img class="carinha" id="normal" data-alt="https://i.imgur.com/3G2HVoJ.png" src="https://i.imgur.com/KDrepED.png">
<input name="input" value="normal" type="radio">

<img class="carinha" id="triste" data-alt="https://i.imgur.com/w9G6PAW.png" src="https://i.imgur.com/2Zdok8l.png">
<input name="input" value="triste" type="radio">

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .