I have the following code which return some text in different fonts (for the moment only TimesNewRoman and Arial). It works fine but if I want to make it work for 20 or more fonts (but not necessarily font, also for font-size, or color, etc) I would have to declare a ton of variable and a very long Js code. Not to speak about CSS code.
I am wondering if there is another way to do this in an easier way and more closed to a deliverable code.
var field, theDivTNR, theDivA;
function init() {
console.log("page loaded and DOM is ready");
field = document.querySelector("#inputField");
theDivTNR = document.querySelector("#theDivTNR");
theDivA = document.querySelector("#theDivA");
}
// The next function is called each type a key has been
// typed in the input field
function showWhatITyped() {
// fill the div with the content of the input field
theDivTNR.innerHTML = field.value;
theDivA.innerHTML = field.value;
}
#theDivTNR{
font-family: timesnewroman;
font-size: 20px;
}
#theDivA{
font-family: arial;
font-size: 20px;
}
<html>
<head>
<title>JavaScript Course</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="init();">
<p>Type text here: <input type="text" oninput= "showWhatITyped();" id="inputField" ></p>
<p>What you typed:</p>
<p>TimesNewRoman</p>
<div id="theDivTNR"></div>
<p>Arial</p>
<div id="theDivA"></div>
</body>
</html>