I want to click on a little face and just leave it, if I click on another uncheck and leave the new one marked

Asked

Viewed 41 times

-1

I want to click on a little face and just leave it, if I click on another uncheck and leave the new one marked

<style>
        .img1{border:4px solid #c2c2c2;
           filter: grayscale(60%) !important;
           border-radius:100px;
          -moz-border-radius:100px;
         -webkit-border-radius:100px;}
 </style>

<ul class="list-form">
            <li>
                    <label for="icone_minsastifeito">
                                <span class="textos">Muito Insatisfeito</span>
                                <img src="{{url()}}/img/icone1.png" onclick="addEfeito1()" id="img1" alt="icone muito insastifeito" class="imagens" style="max-width: 100%;">
                                <input type="radio" name="satisfacao" value="1" id="icone_minsastifeito"/>
                                <span>1</span>
                    </label>   
                    <label for="icone-pinsatisfeito">
                        <span class="textos">Pouco Insatisfeito</span>
                        <img src="{{url()}}/img/icone2.png" onclick="addEfeito2()" id="img2" alt="icone pouco insastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="2" id="icone-pinsatisfeito">
                        <span>2</span>
                    </label>

                    <label for="neutro">
                        <span class="textos">Neutro</span>
                        <img src="{{url()}}/img/icone3.png" onclick="addEfeito3()" id="img3" alt="icone neutro" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="3" id="neutro">
                        <span>3</span>
                    </label>

                    <label for="psatisfeito">
                            <span class="textos">Pouco Satisfeito</span>
                            <img src="{{url()}}/img/icone4.png" onclick="addEfeito4()" id="img4" alt="icone pouco sastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="4" id="psatisfeito">
                        <span>4</span>
                    </label>

                    <label for="msatisfeito">
                        <span class="textos">Muito Satisfeito</span>    
                        <img src="{{url()}}/img/icone5.png" onclick="addEfeito5()" id="img5" alt="icone muito sastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="5" id="msatisfeito">
                        <span>5</span>
                    </label>
            </li>
        </ul>

<script>
        function addEfeito1(){ document.querySelector("#img1").className = 'img1';}
        function addEfeito2(){ document.querySelector("#img2").className = 'img1';}
        function addEfeito3(){ document.querySelector("#img3").className = 'img1';}
        function addEfeito4(){ document.querySelector("#img4").className = 'img1';}
        function addEfeito5(){ document.querySelector("#img5").className = 'img1';}
    </script>
javascript

  • follows application link of this http://enquete.provisorio.ws/lcf-teste/enquete/33

  • following link of the marked faces, however wanted only one to stay https://i.stack.Imgur.com/1sSmy.png

  • Another duplicate https://answall.com/questions/293657/duvidas-para-styryr-um-link-active. and another https://answall.com/questions/363232/addir-class-e-remover

1 answer

0


The logic would be more or less this, before marking what was clicked, clear all, simple and fast.

function uncheckItems (item) {
  item.forEach(element => {
    element.style.color = "#000000"
  })
}

document.querySelectorAll('li').forEach(element => {
  element.addEventListener('click', () => {
    uncheckItems(document.querySelectorAll('li'))   
    element.style.color = "#FF0000"
  })
})
ul {
  display: flex;
}

li {
  list-style: none;
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Browser other questions tagged javascript

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