Reputation: 409

Change css of HTML element from typescript/javascript

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?

Upvotes: 0

Answers (3)

Eshu

Reputation: 185

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

Upvotes: -1

Rupesh Jain

Reputation: 328

  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.

Upvotes: 0

Paolo Dell'Aguzzo

Reputation: 1431

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.

Upvotes: 2

Change css of HTML element from typescript/javascript

Answers (3)

Related Questions