Modify the css styles of an HTML element using TypeScript or JavaScript

Question

Modify the css styles of an HTML element using TypeScript or JavaScript

I've implemented a star rating widget in an HTML form within my React JS application. The widget I am using can be found here. When a user clicks on one of the five stars, the user's information is saved to the server.

Currently, the selected stars remain highlighted even after the response comes back from the server. I would like to reset the stars to their unselected state for the user's next action. However, I'm unsure how to achieve this using TypeScript/Javascript. I've attempted to modify the code as follows:

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

The above code successfully resets the color, but there are other CSS properties like hover, checked, and unchecked that need to be reset as well. How can I include these properties to reset the stars to their initial stage?

Below is the CSS for the widget:

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

/* Additional CSS properties here */

.rating > input:checked + label:hover, etc..

And here is the relevant HTML code:

<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" />
    
    /* HTML for other stars here */
    
</fieldset>

If anyone has a solution or suggestions on how to accomplish this, it would be greatly appreciated! Thank you.

javascript html css typescript

Answer 1

Answer №1

To gain insight into the initial state of your stars widget, use the browser inspector to analyze its classes and inline styles. It is advisable not to rely on inline styles for this purpose.

Once you have identified the initial classes, you can reset them using the following JavaScript code:

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

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

If there is a need to toggle a "checked" status, you can achieve it as shown below:

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

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

In your specific scenario, you can uncheck an element by executing the following JavaScript command:

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

This method can be employed to uncheck any checked elements in the DOM.

Answer 2

To gain insight into the initial state of your stars widget, use the browser inspector to analyze its classes and inline styles. It is advisable not to rely on inline styles for this purpose.

Once you have identified the initial classes, you can reset them using the following JavaScript code:

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

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

If there is a need to toggle a "checked" status, you can achieve it as shown below:

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

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

In your specific scenario, you can uncheck an element by executing the following JavaScript command:

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

This method can be employed to uncheck any checked elements in the DOM.

Answer 3

Answer №2

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

  selectedRating.forEach( function( element, index ) {
    console.log(element);
    element.checked = false;
  });

Click here to view the example - https://jsfiddle.net/4t56c9fq/8/

Avoid applying styles directly in JavaScript. Instead, toggle the "checked" attribute to true or false and let CSS handle the rest.

Answer 4

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

  selectedRating.forEach( function( element, index ) {
    console.log(element);
    element.checked = false;
  });

Click here to view the example - https://jsfiddle.net/4t56c9fq/8/

Avoid applying styles directly in JavaScript. Instead, toggle the "checked" attribute to true or false and let CSS handle the rest.

Answer 5

Answer №3

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

Answer 6

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

Modify the css styles of an HTML element using TypeScript or JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

The name 'Map' cannot be located. Is it necessary to alter your target library?

What is the ideal amount of data to store in browser cache?

Why is it that the default theme of Material UI lacks any stylization at all?

Errors encountered while running `npm install discord.js`

The most efficient method for documenting $.trigger in JavaScript/jQuery is through the use of JSD

An easy guide to using Vue-Router to manipulate URL query parameters in Vue

Having issues with my CodePen React code and its ability to display my gradient background

Using React Material UI checkboxes: Learn how to manipulate other checkboxes within a group by toggling a single checkbox

Adding Extra Fields to PHP Email Form

Issue with Google Chrome when entering time using HTML input type time

Is it possible to choose only half of the elements using the :nth-child selector in

The sequence of event handler executions in JavaScript

Sending the image's identification number as a parameter to a function and showing the total number

Transitioning from Tailored CSS to Bootstrap

Unable to retrieve embedded link using fetchText function in casperjs

Special character object properties in EJS

What is the process of implementing session storage in an AngularJS directive?

What could be causing my data to undergo alterations when transitioning from a frontend form submission to a backend API?

Choose a random object from the array

When clients format datetime, the default date value is sent on the form post