Change image by clicking on radio input

Asked

Viewed 97 times

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>

In this code it is possible to make the three little guys look colorful but I wanted it to be one at a time.

How do I make the little faces return to their original state after clicking on another input?

javascript html css

  • can put another function by assigning the original images to the img and call this function within change1, change2 e change3 before assigning the new image

4 answers

1


You can implement as follows:

creates a new javascript function:

 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
 }

Do the same for the other change methods that will work.

1

READY! What I did was create other functions calling the respective initial images according to the clicked item. Then if you click on the happy face, it will call the functions that will return to the default image of the other faces, and so on.

I hope you understand ;)

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

There’s that shape too. 

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

You can do it in a more practical way using other resources, such as dataset, which is an attribute data-* and use Event handlers instead of multiple attributes onclick, still avoiding various functions and gambiarras.

Behold:

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

Browser other questions tagged javascript html css

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