How to change font-weight for every letter typed using javascript

Question

I have this variable font that I made and I want to implement it on a website, where when the user types, the font-weight for each letter grows. I have this code right now that it grows for the whole text typed, but everything changes there, not each letter. The goal would be to have the font weight grow for each on change (so each letter typed) Thank you in advance if anyone can help out!

<p id="testarea" contentEditable="true">
Type your text here
</p>

<script>
document.getElementById("testarea").onkeypress = function () { myFunction() }
;
var initWeight = 101
var x = 2;
function myFunction() {
    document.getElementById("testarea").style.fontWeight = initWeight+=50  ;
}
</script>

Answer 1

As far as I know, font weights go by a 100, so 100-200-300 etc. I have improved your script and it should work now with proper font.

 document.getElementById("testarea").onkeypress = function () { myFunction() }; var initWeight = 100 function myFunction() { initWeight += 100; document.getElementById("testarea").style.fontWeight = initWeight; }

 <p id="testarea" contentEditable="true"> Type your text here </p>