[FIXED] How to limit my decimal value to 2 places on my <td>

Issue

I'm making a query to my database to return a value of double precision. This value in my database goes up to 17 decimal places but I only want to display 2 decimal places on the web page.

This is my html with the table. The value of the decimal goes into the {{savings_percent}}

 <table class="table text-light text-end">
                                        <thead>
                                            <tr>
                                                
                                                <th scope="col">CHW</th>
                                       
                                            </tr>
                                        </thead>
                                        <tbody class="text-end">
                                            <tr id="decimal">
                                                <th scope="row">%</th>
                                                {{#with chw}}
                                                <td class='rounded'>{{savings_percent}}</td>
                                                {{/with}}
                                            
                                        </tbody>
                                    </table>

This is how I'm trying to grab the value, convert it to decimal and then give it a fixed number of two decimals. The console is giving me $(...).val(...).toFixed is not a function. Does anyone have a solution on how I can fix this?

let decimal = parseFloat($("#decimal .rounded").text())
    
    window.onload = () => {

        $('.rounded').val(decimal).toFixed(2)

        console.log(decimal)   
    };

Solution

val() is only for form controls

I would use text(function) which gives you the current text to do what you need to before returning modifications

$('.rounded').text(function(i,curr){
    return parseFloat(curr).toFixed(2)
})

Answered By - charlietfl

Answer Checked By - Terry (PHPFixing Volunteer)