CODEWITHSUNDEEP
javascripthtmlfunctiontypesfonts
Hanna Hofmann
Hanna Hofmann

Reputation: 43

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

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 (so what I need the code to do is say for each keydown event the font-weight changes but not the whole text, so the first letter typed would have the smaller font-weight and stay that way but the following letters would grow in font-weight).

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

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

<script>
   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";
   }


   function myFunction2() {
      document.getElementById("testarea").style.fontWeight = "101";
   }
</script>

Upvotes: 0

Views: 100

Answers (1)

James Westgate
James Westgate

Reputation: 11464

You will need to place each letter in a separate e.g <span> tag, so that you can target each letter separately. Your output would end up looking something like this

<p><span class="bolder">h</span><span class="bold">e</span>llo</p>

Upvotes: 1

Related Questions