How do i Fix this NaN

Question

whenever i call for the inputs made inside the table they end being NaN and it then cause all of my code to crash please check out the image attached to this post to get a full picture of what i am talking about, I even went forward to do more and when I call for the input made for user for calculations it gave the html input element instead of the inputted values the user made

whenever i call for the input in the table i get what you see

 let $unitload1 = document.getElementById("unitload1"); let $unitload2 = document.getElementById("unitload2"); let $unitload111 = parseInt($unitload1.value); let $unitload222 = parseInt($unitload2.value); //grade tables // const $selectedGrade; let grading1 = document.getElementById("courseGrade1"); let grading2 = document.getElementById("courseGrade2"); const $gpa = document.getElementById("gpaprint"); const check1 = "yes ooo"; console.log($unitload111, $unitload222);

 <table> <tr> <td> <div contenteditable="true">cve 445</div> </td> <td> <div contenteditable="true">RAW MATERIALS</div> </td> <td><input type="number" id="unitload1" value="1"/></td> <td><input type="number" id="courseGrade1" value="1" /></td> </tr> <tr> <td> <div contenteditable="true">cve 945</div> </td> <td> <div contenteditable="true">RAW MATERIALS</div> </td> <td><input type="number" id="unitload2" value="2"/></td> <td><input type="text" id="courseGrade2" value="2" /></td> </tr> </table>

Answer 1

You can try to use Number in place of parseInt to cast the String value to number. Example:

let $unitload222 = Number($unitload2.value);