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>

Answer 2

You can try incrementing the font-weight like this.

<p id="testarea" onkeyup="myFunction2()" contentEditable="true">
Type your text here
</p>


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

<script>

var bold = 100;

// document.getElementById("testarea").onchange = function() {myFunction()}
// document.getElementById("testarea").addEventListener("input", myFunction)

function myFunction2() {
  document.getElementById("testarea").style.fontWeight = bold;
  bold+=100;
  console.log(bold);
}

</script>

Answer 3

I have imported bootstrap for better effects.

TIP: select a font style which has large number of font-weight to see the effect.

 document.getElementById("testarea").onchange = function() {myFunction()} document.getElementById("testarea").addEventListener("input", myFunction); var isItChanges = true; function myFunction() { document.getElementById("testarea").style.fontWeight = "900"; var fontWeight = 100; if(isItChanges){ isItChanges = false; var timer = setInterval(()=>{ fontWeight = fontWeight + 15; document.getElementById("testarea").style.fontWeight = fontWeight; if(fontWeight > 900){ clearInterval(timer); } },1); } } function myFunction2() { document.getElementById("testarea").style.fontWeight = "101"; isItChanges = true; }

 #testarea{ font-weight: 100; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <p id="testarea" contentEditable="true"> Type your text here </p> <button type="button" onclick="myFunction2()">uncensour</button>