How to unselect all selected rating star when click on the same star in html?

Question

How to unselect all selected rating star when click on the same star in html?

707 Views Asked by Sidath At 08 July 2021 at 08:48

I have developed a web page for the star ratings. I need to unselect the stars if the user clicks twice on the same star, how to unselect all the star rating values? that means if the user clicks on 3 stars for the rating and again click on the 3rd star how to disappear all the rating stars value?

This is what I tried

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <h1>This is Home page</h1>
    <p>This is a testing page for rating.</p>
    <div>
        <img onClick="rate()" class="star" id="1" src="./img/star.png" />
        <img onClick="rate()" class="star" id="2" src="./img/star.png" />
        <img onClick="rate()" class="star" id="3" src="./img/star.png" />
        <img onClick="rate()" class="star" id="4" src="./img/star.png" />
        <img onClick="rate()" class="star" id="5" src="./img/star.png" />
    </div>
    <div>
        <img onClick="rate1()" class="star" id="6" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="7" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="8" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="9" src="./img/star.png" />
        <img onClick="rate1()" class="star" id="10" src="./img/star.png" />
    </div> 
</body> 
</html>
<script>
    function rate() {
        const { id } = event.target;
        var i;
        for (i = 1; i <= 5; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src", "./img/fillstar.png");
            } else {
                document.getElementById(i).setAttribute("src", "./img/star.png");
            }
        }
    }

    function rate1() {
        const { id } = event.target;
        var i;
        for (i = 6; i <= 10; i++) {
            if (i <= parseInt(id)) {
                document.getElementById(i).setAttribute("src", "./img/fillstar.png");
            } else {
                document.getElementById(i).setAttribute("src", "./img/star.png");
            }
        }
    }
</script>

Original Q&A

There are 2 best solutions below

**Yoni A** · Answer 1 · 2021-07-08T09:32:44.997000

You can dynamically add class to every rated star to indicate if it is filled or not (e.g, add class name filled to every rated star). Then, on every click check if the element of event.target contains the class filled. If so, call your functions and in addition, remove all filled classes (unrate). If not, add filled class to every relevant star (rate).

To dynamically toggle (add or remove) a class to an element, you can use element.classList.toggle("className").

see: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
code example (similar to yours): https://stackblitz.com/edit/star-rating-demo?file=index.html

**Sarkar** · Answer 2 · 2021-07-08T10:03:06.417000

first get all the elements inside an array so you can have access to them

var stars = Array.from(document.querySelectorAll(".star"));

make a function to uncheck all the stars in your array

function uncheckAllStars(){
    starts.forEach(element => {
        element.classList.setAttribute("src", "./img/star.png");
    })
}

and now add ondblclick to your star elements which trigger when you double click on the element

<img onClick="rate1()" ondblclick="uncheckAllStars()" class="star" id="9" src="./img/star.png" />

now when you double click on a star all of the other stars will be unfilled(their source of image change in this case) this is the idea you can tweak it till it fit your needs

How to unselect all selected rating star when click on the same star in html?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in RATING-SYSTEM

Trending Questions

Popular # Hahtags

Popular Questions