title: How do I fix code only running one part of a function?
body: <p>I'm attempting to create a super super basic temperature conversion website that turns Fahrenheit to Celcius, Celcius in Fahrenheit, and kelvin into Celcius, I will probably add more options later. The code seems to only be returning the Fahrenheit value. I think it is getting the input but running the wrong part of the function?? Any help would be amazing</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>// Shows Dropdown menu
  function show() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  // Changes dropdown button text to the option
  
  function celciusText() {
    document.getElementById("dropdown").innerHTML = 'Celcius ▼';
  }
  
  function fahrenheitText() {
    document.getElementById("dropdown").innerHTML = 'Fahrenheit ▼';
  }
  
  function kelvinText() {
    document.getElementById("dropdown").innerHTML = 'Kelvin ▼';
  }
  
  // Conversion Script  
  function tempConvert() {
    let input = document.getElementById("tempInput").value
  
    if (document.getElementById("dropdown").value = 'Celcius ▼') {
      let output = (input * (9 / 5) + 32)
  
      document.getElementById("tempOutput").innerHTML = output + " F";
  
    } else if (document.getElementById("dropdown").value = 'Fahrenheit ▼') {
      let output = (input - 32) * (5 / 9)
  
      document.getElementById("tempOutput").innerHTML = output + " C";
    } else if (document.getElementById("dropdown").value = 'Kelvin ▼') {
      let output = (input + 273.15)
  
      document.getElementById("tempOutput").innerHTML = output + " C";
    } else {
      window.prompt("Invalid")
    }
  };
  
  // Reset Button 
  function clearFields() {
    const clearBtn = document.getElementById("reset");
    const inputField = document.getElementById("tempInput");
    const outputField = document.getElementById("tempOutput");
    const dropDown = document.getElementById("dropdown")
  
  
  
    clearBtn.addEventListener('click', () =&gt; {
      inputField.value = " ";
      outputField.value = " ";
      dropDown.innerHTML = "Temperature Unit ▼";
    })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Dropdown Button */
  
  .dropbtn {
    display: inline-block;
    padding: 10px 14px;
    color: #3485e4;
    border: 1px solid #2d71be;
    text-decoration: none;
    font-size: 14px;
    transform: translate(0px, 65px);
    line-height: 120%;
    background-color: rgba(255, 255, 255, 0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background-color 300ms ease;
    -moz-transition: background-color 300ms ease;
    transition: background-color 300ms ease;
    cursor: pointer;
  }
  
  
  /* Dropdown button on hover &amp; focus */
  
  .dropbtn:hover,
  .dropbtn:focus {
    background-color: rgba(174, 221, 245, 0.3);
    color: #3485e4;
  }
  
  
  /* The container &lt;div&gt; - needed to position the dropdown content */
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  
  /* Dropdown Content (Hidden by Default) */
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
    width: 145px;
    z-index: 1;
  }
  
  
  /* Links inside the dropdown */
  
  .dropdown-content button {
    display: inline-block;
    transform: translate(0px, 45px);
    padding: 10px 14px;
    width: 145px;
    color: #3485e4;
    border: 1px solid #2d71be;
    text-decoration: none;
    font-size: 14px;
    line-height: 120%;
    background-color: rgba(255, 255, 255, 0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background-color 300ms ease;
    -moz-transition: background-color 300ms ease;
    transition: background-color 300ms ease;
    cursor: pointer;
  }
  
  
  /* Change color of dropdown links on hover */
  
  .dropdown-content button:hover {
    background-color: #ddd
  }
  
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  
  .show {
    display: block;
  }
  
  
  /* CSS for number input */
  
  input[type=number] {
    display: inline-block;
    width: 50%;
    padding: 12px 20px;
    transform: translate(150px);
    margin: 8px 0;
    box-sizing: border-box;
    z-index: 1;
  }
  
  
  /* CSS for submit button */
  
  input[type=button] {
    transition-duration: 0.4s;
    border: 2px solid lightseagreen;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0);
    ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    width: 85px;
    padding: 5px 6px;
    margin: auto;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  input[type=button]:hover {
    background-color: lightseagreen;
    color: white;
  }
  
  
  /* Output Field */
  
  output {
    display: inline;
    width: 100%;
    padding: 10px 100px;
    margin: auto;
    border: 1px solid black;
  }
  
  
  /* Reset Button */
  
  #reset {
    transition-duration: 0.4s;
    border: 2px solid rgb(178, 32, 56);
    border-radius: 5px;
    background-color: rgba(178, 255, 255, 0);
    ;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    width: 85px;
    padding: 5px 6px;
    margin: auto;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  #reset:hover {
    background-color: rgb(178, 32, 56);
    color: white;
  }
  
  #small {
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: absolute;
    transform: translate(150px, 10px)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;repl.it&lt;/title&gt;
    &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;div id="inputForm"&gt;
    &lt;form id="input"&gt;
      &lt;div&gt;
        &lt;a href="#" onclick="show()" id="dropdown" class="dropbtn"&gt;Temperature Unit ▼&lt;/a&gt;
        &lt;div id="myDropdown" class="dropdown-content"&gt;
          &lt;button onclick=celciusText() id="celcius" href="#" type="button"&gt;Celcius&lt;/button&gt;
          &lt;button id="fahrenheit" onclick=fahrenheitText() type="button"&gt;Fahrenheit&lt;/button&gt;
          &lt;button type="button" id="Kelvin" onclick=kelvinText()&gt;Kelvin&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label id="small" for="tempInput"&gt;Input Temperature:&lt;/label&gt; &lt;br&gt;
        &lt;input type="number" id="tempInput" name="tempInput"&gt; &lt;/br&gt;
      &lt;/div&gt;
      &lt;input type="button" value="Submit" onclick=tempConvert()&gt;
      &lt;input type="button" id="reset" value="Reset" onclick=clearFields()&gt;
      &lt;output name="tempOutput" for="tempInput" id="tempOutput"&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
    &lt;body&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>