Show different type of fonts 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;
}
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;JavaScript Course&lt;/title&gt;
 &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
 &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;
&lt;body onload="init();"&gt;
 &lt;p&gt;Type text here: &lt;input type="text" oninput= "showWhatITyped();" id="inputField" &gt;&lt;/p&gt;
 &lt;p&gt;What you typed:&lt;/p&gt;
 &lt;p&gt;TimesNewRoman&lt;/p&gt;
 &lt;div id="theDivTNR"&gt;&lt;/div&gt;
 &lt;p&gt;Arial&lt;/p&gt;
 &lt;div id="theDivA"&gt;&lt;/div&gt; 

&lt;/body&gt;
&lt;/html&gt;
JavaScript


var field, theDivTNR, theDivA;



Why are these in a global scope? It's a good habit to always create your own scope so that you don't have unwanted clashes between scripts which use the same names.


  console.log("page loaded and DOM is ready");



This is debug code, and should be deleted before the code is ready for review.


// 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;
}



What if field.value is not valid HTML? I think this should set textContent instead of innerHTML.



HTML


  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;



If you have src you don't need type, because the type can be determined from the HTTP headers.


&lt;body onload="init();"&gt;



This is quite ugly and very old-fashioned. See e.g. https://stackoverflow.com/q/799981/573420


  &lt;p&gt;Type text here: &lt;input type="text" oninput= "showWhatITyped();" id="inputField" &gt;&lt;/p&gt;



That oninput is even more ugly, and wholly unnecessary. Just refactor the init method to say

  document.querySelector("#inputField").oninput = showWhatITyped;


You may notice that this eliminates field. It's not necessary to store it, provided that you refactor the listener to handle the event which is passed to it. And, in fact, you can also refactor it to be an anonymous function.


  &lt;p&gt;TimesNewRoman&lt;/p&gt;
  &lt;div id="theDivTNR"&gt;&lt;/div&gt;
  &lt;p&gt;Arial&lt;/p&gt;
  &lt;div id="theDivA"&gt;&lt;/div&gt;    



You asked how to expand to more fonts etc. The simple answer is to use a loop rather than implementing it by hand. Add class="preview" to each of the preview divs, and then use document.querySelectorAll('.preview') to get hold of them.