Как изменить ширину шрифта в javascript при каждом изменении

Question

Я сделал переменный шрифт, который изменяет font-weight с 101 до 900, и хотел бы реализовать его на веб-сайте, где, пока пользователь печатает шрифт, меняет свой вес с каждой набранной буквой

I вроде бы есть этот код прямо сейчас, но он меняет его только непосредственно на вес шрифта 900 и не go медленно об этом. Спасибо за любую помощь !!

<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

Вы должны определить, сколько букв вы хотите отображать в тексте с весом 900. Например, если вы хотите, чтобы ваш текст состоял из 100 символов, вы можете использовать следующий код:

var myInput = document.getElementById("testarea");
var relation = myInput.innerText.length / 100;
if(relation < 1){
   myInput.style.fontWeight = 100 + (relation*800);
}else{
   myInput.style.fontWeight = "900";
}