title: Onclick does not call function( Function not defined)
body: <p>I know this answer has been asked a lot of times but as a beginner, I am not able to wrap around this error. I have tried to use an event listener and changed the submit to a button but it does not seem to work. Any simple solutions?</p>
  <p>Does the defer keyword in linking the JS file have anything to do with it?</p>
  <p>&lt;!-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const massInput = document.querySelector("#mass");
  const earthWeight = Number(massInput);
  const planetInput = document.querySelector("#planet");
  const userPlanet = planetInput.options[planetInput.selectedIndex].text;
  const result = document.querySelector("#result");
  
  function calculateWeight() {
    console.log(earthWeight);
    if (userPlanet == "Mercury") {
      console.log(earthWeight * 0.378);
    } else if (userPlanet == "Venus") {
      var newWeight = earthWeight * 0.907;
      result.textContent = newWeight;
    } else if (userPlanet == "Mars") {
      var newWeight = earthWeight * 0.377;
      result.textContent = newWeight;
    } else if (userPlanet == "Jupiter") {
      var newWeight = earthWeight * 2.36;
      result.textContent = newWeight;
    } else if (userPlanet == "Saturn") {
      var newWeight = earthWeight * 0.916;
      result.textContent = newWeight;
    } else {
      result.textContent = "Something is wrong.";
      return "Invalid entry";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="/script.js" defer&gt;&lt;/script&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Exercise 5&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;Calculate your weight on different planets!&lt;/h1&gt;
      &lt;form method="get"&gt;
        &lt;label for="mass"&gt;Your earthly weight:&lt;/label&gt;
        &lt;input type="text" id="mass" name="mass" /&gt;&lt;br /&gt;&lt;br /&gt;
  
        &lt;label for="planet"&gt;Now choose a planet:&lt;/label&gt;
  
        &lt;select name="planet" id="planet"&gt;
          &lt;option value="Mercury"&gt;Mercury&lt;/option&gt;
          &lt;option value="Venus"&gt;Venus&lt;/option&gt;
          &lt;option value="Mars"&gt;Mars&lt;/option&gt;
          &lt;option value="Jupiter"&gt;Jupiter&lt;/option&gt;
          &lt;option value="Saturn"&gt;Saturn&lt;/option&gt;&lt;/select
        &gt;&lt;br /&gt;&lt;br /&gt;
  
        &lt;button type="button" onclick="calculateWeight()"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;p class="result"&gt;Result will appear here.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <ul>
  <li>begin snippet: js hide: false console: true babel: false --&gt;</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>const massInput = document.querySelector(&quot;#mass&quot;);
  const earthWeight = Number(massInput);
  const planetInput = document.querySelector(&quot;#planet&quot;);
  const userPlanet = planetInput.options[planetInput.selectedIndex].text;
  const result = document.querySelector(&quot;#result&quot;);
  
  function calculateWeight() {
    console.log(earthWeight);
    if (userPlanet == &quot;Mercury&quot;) {
      console.log(earthWeight * 0.378);
    } else if (userPlanet == &quot;Venus&quot;) {
      var newWeight = earthWeight * 0.907;
      result.textContent = newWeight;
    } else if (userPlanet == &quot;Mars&quot;) {
      var newWeight = earthWeight * 0.377;
      result.textContent = newWeight;
    } else if (userPlanet == &quot;Jupiter&quot;) {
      var newWeight = earthWeight * 2.36;
      result.textContent = newWeight;
    } else if (userPlanet == &quot;Saturn&quot;) {
      var newWeight = earthWeight * 0.916;
      result.textContent = newWeight;
    } else {
      result.textContent = &quot;Something is wrong.&quot;;
      return &quot;Invalid entry&quot;;
    }
  }
  </code></pre>