You are almost on the right track just just added semi colons ins span style style="font-weight:'+initWeight+';
As far as the size not increasing I created a alert on event listener just to show that it does indeed work. However visual differential may not be enought for the eye to notice.
I have created an example with my own bit of creativity where besides font-eight we are randomising font-size to trick the eye a bit more.
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<style>
@import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
@font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
alert(initWeight);
myFunction(event.key);
};
function myFunction(letter) {
innerHTML = '<span style="font-weight:'+initWeight+';">' + letter + '</span>'
document.getElementById("testarea").innerHTML += innerHTML
initWeight += 10;
}
</script>
</body>
</html>FINAL EXAMPLE
<html>
<body>
<div class="myInput" id="testarea" contentEditable="true"> insert text </div>
<div class="myInput" id="showarea"></div>
<style>
@import {
https: //static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2}
@font-face {
font-family:wf_2acfb8a9fc2d407896ec287713383a8d;
src: url("https://static.wixstatic.com/ufonts/5bda5f_2acfb8a9fc2d407896ec287713383a8d/woff2/file.woff2") format("woff2");
font-weight: 101 900
}
div {
font-family: 'wf_2acfb8a9fc2d407896ec287713383a8d', sans-serif;
font-weight: 101;
font-size: 100px;
}
</style>
<script>
let initWeight = 100;
document.getElementById("testarea").onkeypress = function(event) {
myFunction(event.key);
};
function myFunction(letter) {
let size = Math.floor(Math.random() * (100 - 50)) + 15;
innerHTML = '<span style="font-weight:'+initWeight+'; font-Size:' +size+ 'pt;">' + letter + '</span>'
document.getElementById("showarea").innerHTML += innerHTML;
initWeight += 10;
}
</script>
</body>
</html>