How to change font-weight in javascript for every onchange

Question

I made a variable font, that changes font-weight from 101 to 900 and would like to implement it on a website, where, while the user is typing the font is changing its weight with every letter typed

I kind of have this code right now but it only changes it directly to font weight 900 and does't go slowly about it. I am really new to this so I don't know what else to try Thanks for any help!!

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


<button type="button" onclick="myFunction2()">uncensour</button>

<script>



document.getElementById("testarea").onchange = function() {myFunction()}
document.getElementById("testarea").addEventListener("input", myFunction)
function myFunction() {
  document.getElementById("testarea").style.fontWeight = "900";
}
function myFunction2() {
  document.getElementById("testarea").style.fontWeight = "101";
}

</script>

Answer 1

You can implement this by onkeypress event.

document.getElementById("testarea").onkeypress = function () { myFunction() }
document.getElementById("testarea").addEventListener("input", myFunction);
var initWeight = 101;
function myFunction() {
    document.getElementById("testarea").style.fontWeight = initWeight++;
}
function myFunction2() {
    document.getElementById("testarea").style.fontWeight = "101";
}

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


<button type="button" onclick="myFunction2()">uncensour</button>