Passing variable from script to HTML

Question

I'm sure I must be missing something really silly here, but I can't seem to pass a value from my javascript function to my html form.

I have the following code:

<form class="form">
  <p>Potencia a Instalar (Watts)
    <br />
    <span class="form"><input type="text" name="watts_to_install" value="" size="40" id="watts_to_install" required />
    </span>
  </p>
  <p>Panel a ser utilizado<br />
    <span class="form">
      <select name="panel" class="form" id="panel">
        <option id="Hanwha">Hanwha 250W</option>
        <option id="Sharp">Sharp 250W</option> 
      </select>
    </span>
  </p>
  <button onclick="Process1()">Nivel 1</button>
  <span class="form">
    <p>Potencia Maxima de Panel</p>
    <input type="text" id="max_power" value="">
    <br />
    <p>Cantidad a Instalar</p>
    <input type="text" id="quantity" value="">
  </span>
</form> 

<script type="text/javascript">
function Process1()
{
    var power = document.getElementById('watts_to_install').value;
    var panel = document.getElementById('panel').value;
    switch(panel)
    {
       case 'Hanwha':
          var power_panel = 250;
          var panel_quantity = power/power_panel;

          document.getElementById('max_power').value = power_panel;
          document.getElementById('quantity').value= panel_quantity;
          break;
       case 'Sharp':
          break;
   }
}
</script>

The problem is that the page loads and...nothing happends. I see the information in my URL but nothing else. I tried passing it using .innerHTML instead of .value but it was to no avail. I know I must be missing something really easy but I just can't seem to find it.

Answer 1

You need to replace id with value on your option tags:

 function Process1() { var power = document.getElementById('watts_to_install').value; var panel = document.getElementById('panel').value; switch (panel) { case 'Hanwha': var power_panel = 250; var panel_quantity = power / power_panel; document.getElementById('max_power').value = power_panel; document.getElementById('quantity').value = panel_quantity; break; case 'Sharp': break; } } 

 <form class="form"> <p>Potencia a Instalar (Watts) <br /> <span class="form"><input type="text" name="watts_to_install" value="" size="40" id="watts_to_install" required /></span> </p> <p>Panel a ser utilizado <br /> <span class="form"><select name="panel" class="form" id="panel"> <option value="Hanwha">Hanwha 250W</option> <option value="Sharp">Sharp 250W</option> </select></span> </p> <button onclick="Process1()">Nivel 1</button> <span class="form"> <p>Potencia Maxima de Panel</p> <input type="text" id="max_power" value=""> <br /> <p>Cantidad a Instalar</p> <input type="text" id="quantity" value=""> </span> </form>