title: How to call a JavaScript function from drop down menu
body: <p>I'm working on a school project and I need some help. I'm suposed to make a drop down menu which allows the user to change font-size, font-type and backgroundcolor of the text they are reading. My problem is that I can't get my functions to run. I'm new to this, so I don't know if the problem is how I try to call for it or if the function i flawed. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="dropdownmeny.css"&gt;
   &lt;h1&gt;Javascript&lt;/h1&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;nav&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Font-size&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" onclick="liten()"&gt;15px&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" onclick="medium()"&gt;20px&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" onclick="stor()"&gt;25px&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/li&gt;   
      &lt;li&gt;&lt;a href="#"&gt;Font-type&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Verdana&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Times New Roman&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Arial&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Bakgrunnsfarge&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Rosa&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Turkis&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Gul&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;p id=tekst style="background-color:pink; font-size: 15px; font-family: verdana"&gt;This text should change&lt;/p&gt;
  &lt;script&gt;function liten() {document.getElementById("tekst").style.font-size = "15px"; }&lt;/script&gt;
  &lt;script&gt;function medium() {document.getElementById("tekst").style.font-size = "20px"; }&lt;/script&gt;
  &lt;script&gt;function stor() {document.getElementById("tekst").style.font-size = "25px"; }&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I only have the functions for the font-size here, but i guess it will be the same for all of them. English isn't my first language, but I hope I have been clear enough. Any help will be greatly appreciated. </p>