Show different type of fonts
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.