Change css of HTML element from typescript/javascript

Question

I am using star rating widget in one of my HTML forms in my React JS application. I am referring this widget https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html. When user clicks rating from one of five star, the user information gets saved to server.

The stars remain selected when user clicks on any star. I want to reset the stars back to unselected when the response comes back from server for user's next action.

I dont know how to do that using Typescript/Javascript. I tried changing it like below :

    let ratingElement = document.querySelectorAll("#ratingField >  label");
    if (ratingElement.length > 0) {
      for (let i = 0; i < ratingElement.length; i++) {
        ratingElement[i].style.color = "#ddd";
      }
    }

Using the above code, the color gets reset. But there are other properties in CSS like hover,checked,unchecked on the widget. How to add those properties to reset the stars same like its initial stage?

Below is my CSS for the widget:

.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}
.rating > label:before {
  margin: 5px;
  font-size: 25px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label {
  color: #ddd;
  float: right;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
  color: #ffd700;
} /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
  color: #ffed85;
}

And my HTML code is like :

<fieldset
    className="rating"
    style={{ marginLeft: 5, marginRight: 5 }}
    id="ratingField"
>
    <input type="radio" id="star5" name="rating" value="5" />
    <label
        onClick={() => this.shortlist(5)}
        className="full"
        htmlFor="star5"
        title="Awesome"
    />
    <input type="radio" id="star4" name="rating" value="4" />
    <label
        onClick={() => this.shortlist(4)}
        className="full"
        htmlFor="star4"
        title="Pretty good"
    />
    <input type="radio" id="star3" name="rating" value="3" />
    <label
        onClick={() => this.shortlist(3)}
        className="full"
        htmlFor="star3"
        title="Average"
    />
    <input type="radio" id="star2" name="rating" value="2" />
    <label
        onClick={() => this.shortlist(2)}
        className="full"
        htmlFor="star2"
        title="Kinda bad"
    />
    <input type="radio" id="star1" name="rating" value="1" />
    <label
        onClick={() => this.shortlist(1)}
        className="full"
        htmlFor="star1"
        title="Worst"
    />
</fieldset>

Can anyone help?

Paolo Dell'Aguzzo · Accepted Answer · 2018-06-26 07:06:47Z

2

Use the browser inspector to understand what's the initial status of your stars widget (classes, inline styles, etc.). My advice is to not use inline styles.

After that you have to restore your initial classes, you can do it with:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

If there is even something like "checked" you can do:

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

In your case you can uncheck element just with:

document.getElementById("star1").checked = false;

For each element checked you can uncheck it this way.

answered Jun 26, 2018 at 7:06

Paolo Dell'Aguzzo

1,43111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricks Over a year ago

This worked. Doing it checked=false was the trick. Thank you very much Paolo Dell'Aguzzo.

Rupesh Jain · Accepted Answer · 2018-06-26 07:29:22Z

0

  let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");

  ratingElement.forEach( function( obj, idx ) {
    console.log(obj);
    obj.checked = false;
  });

Check this fiddle - https://jsfiddle.net/8bk37a5j/16/

You dont need to set styes in javascript. Just change the "checked" value to true/false and the rest should be handled in CSS.

answered Jun 26, 2018 at 7:29

Rupesh Jain

3284 silver badges12 bronze badges

Comments

Eshu · Accepted Answer · 2018-06-26 07:47:02Z

   <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
for(var i=1;i<=parseInt($(this).attr('name'));i++)
{
$('input[name="'+i+'"]').next('label').css('background-position','0 0')
}
})
$('#reset').click(function(){
$('input[type="radio"]').next('label').css('background-position','0 -16px')
})
})
</script>
<style>
.rating {
    overflow: hidden;
    display: inline-block;
}

.rating-input {
    float: right;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
}

.rating-star {
    cursor: pointer;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px;
}

.rating-star:hover {
    background-position: 0 0;
}
</style>
<body>

       <span class="rating">
    <input type="radio" class="rating-input"
           id="rating-input-1-5" name="1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-4" name="2">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-3" name="3">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-2" name="4">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-1" name="5">
    <label for="rating-input-1-1" class="rating-star"></label>
	<input type="button" value="Reset" id="reset">
</span>
    </body>
    </html>

Collectives™ on Stack Overflow

Change css of HTML element from typescript/javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related