Script output font size in HTML/JS

Question

I'm trying to code in HTML/JS for the first time, my goal is to create a script that picks random words out of a list, and I think I'm on a good path. The problem that I can't solve is that I could not find a way to change the script output size, I just need it a lot bigger.

<html>
  <button onclick="randomizeFunction()">NUOVA PAROLA</button>
  
  <p>La parola è:</p>
  <p id="randomWord"></p>
</html>

<script>
const myList = ["test1","test2","test3"];

randomizeFunction()

function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * myList.length)]
}
</script>

I've been able only to set the font to italics

<html>
  <button onclick="randomizeFunction()">NUOVA PAROLA</button>
  
  <p>La parola è:</p>
  <p id="randomWord"></p>
</html>

<script>
document.body.style.fontStyle = "italic"
const myList = ["test1","test2","test3"];

randomizeFunction()

function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * myList.length)]
}
</script>

Can anybody help? Thanks in advance, Luca

Scott Marcus · Accepted Answer · 2021-02-01T22:53:31.233

You should use the fontSize CSS property and you must set it to a valid font size, which will include the unit (px, em, vh, vw, %, etc.)

<html>
  <button onclick="randomizeFunction()">NUOVA PAROLA</button>
  
  <p>La parola è:</p>
  <p id="randomWord"></p>

  <script>
    const word = document.getElementById("randomWord");
    const myList = ["test1","test2","test3"];

    randomizeFunction()

    function randomizeFunction() {
        word.innerHTML = myList[Math.floor(Math.random() * myList.length)];
        word.style.fontStyle = "italic"
        word.style.fontSize = "4em";  //4x the size in effect at the moment
    }
    </script>

</html>

But really, as you are new to all this, it's important that you pick up good habits early and there are a lot of bad habits that you'll find people using out there without even knowing that they are bad.

First, your HTML is not valid because you don't have a head or body section.
The script element must be part of the html element. It's often best to include it just before the closing of the body element so that by the time it's executed, all the HTML will have been parsed into memory.
Don't use inline HTML event attributes like onclick to set up event handlers. This is a 25+ year old technique that just won't die because people just copy other people's code without understanding it. Use .addEventListener() separately in JavaScript.
Don't use .innerHTML if you can avoid it as there are security and performance implications with it. Since you aren't setting or getting any HTML in your string, just use .textContent.
Rather than setting the inline style of an element with the .style property, apply or remove CSS classes. This way you better separate the HTML and the CSS and it's easier to override any applied CSS later as well as reducing the overall amount of redundant code you'll type.
Get in the habit of ending your statements with a semicolon.

So, here's your code again, with those adjustments:

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
    
    <style>
      /* Pre-define a CSS class to use when ready */    
      .bigItalic {
        font-size:4em;
        font-style:italic;
      }
    </style>
  </head>
  <body>
    <button>NUOVA PAROLA</button>
    <p>La parola è:</p>
    <p id="randomWord"></p>
    <script>
      // Don't use HTML event attributes to set up event handlers,
      // do it separately in the JavaScript
      document.querySelector("button").addEventListener("click", randomize)
    
      // Get references to the elements you'll use over and over, just once
      const word = document.getElementById("randomWord");
    
      const myList = ["test1","test2","test3"];

      randomize();

      function randomize() {
        word.textContent = myList[Math.floor(Math.random() * myList.length)];
        // Just apply the pre-made class instead of styling it here
        word.classList.add("bigItalic");
      }
    </script>
  </body>
</html>

Thanks for the answer, the only problem is that I have to put that code in a HTML box on Elementor (Wordpress Block Builder) and by using that code all the websites text fonts change. Is there any way to avoid that? — ilmanto13, Feb 01 '21 at 22:45
@ilmanto13 I'm only doing what your code was doing. If there is a specific portion of the document you wish to modify, you'd have to access that part specifically. I'll update my answer to show this. — Scott Marcus, Feb 01 '21 at 22:48

Script output font size in HTML/JS

1 Answers1

Linked