Casey Gore Casey Gore - 1 month ago 10
HTML Question

Using a form to call a javascript and then put the calculated values into the form

I am enrolled in an online class and I keep reading the section of my book for js inclusion and I can't figure this out. Could someone please explain to me what I am doing wrong. Im trying to call the function to take in the weight and display the calculations back in the form text boxes. I cant find anything on the internet like this or explains how it works. Why can't this just be like C++ :(

<!DOCTYPE html>
<html>
<script>
function Weight()
{
var mercury = earth*(.378);
var venus = earth*(.907);
var mars = earth*(.377);
var jupiter = earth*(2.364);
var saturn = earth*(.916);
var uranus = earth*(.889);
var neptune = earth*(1.125);
var pluto = earth*(.067);
var sun = earth*(27.072);
var moon = earth*(.166);

}
</script>

<body>

<form action="javascript:Weight(earth);">
Enter Your Weight on Earth:<br>
<input type="text" name="earth">
<br><br>
Mercury:<br>
<input type="text" name="mercury">
<br>
Venus:<br>
<input type="text" name="venus">
<br>
Mars:<br>
<input type="text" name="mars">
<br>
Jupiter:<br>
<input type="text" name="jupiter">
<br>
Saturn:<br>
<input type="text" name="saturn">
<br>
Uranus:<br>
<input type="text" name="uranus">
<br>
Neptune:<br>
<input type="text" name="neptune">
<br>
Pluto:<br>
<input type="text" name="pluto">
<br>
Sun:<br>
<input type="text" name="sun">
<br>
Moon:<br>
<input type="text" name="moon">
<br>
<input type="submit" value="Calculate">
</form>


</body>
</html>

Answer

Here is a working demo:

var planetsArray = [{name: "mercury",weight: 0.378}, {name: "venus",weight: 0.907}, {name: "mars",weight: 0.377}, {name: "jupiter",weight: 2.364}, {name: "saturn",weight: 0.916}, {name: "uranus",weight: 0.889}, {name: "neptune",weight: 1.125}, {name: "pluto",weight: 0.067}, {name: "sun",weight:27.072}, {name: "moon",weight: 0.166}];

var submitButton = document.getElementById('submit');
submitButton.onclick = function (e) {
    e.preventDefault();
    var earth = document.getElementsByName('earth')[0];
    planetsArray.forEach(function (p) {
      var elem = document.getElementsByName(p.name)[0],
          weight = p.weight * +earth.value;
      elem.value = weight.toFixed(2);
    });
};
<form action="javascript:Weight(earth);">
  Enter Your Weight on Earth:<br>
  <input type="text" name="earth">
  <br><br>
  Mercury:<br>
  <input type="text" name="mercury">
  <br>
  Venus:<br>
  <input type="text" name="venus">
  <br>
  Mars:<br>
  <input type="text" name="mars">
  <br>
  Jupiter:<br>
  <input type="text" name="jupiter">
  <br>
  Saturn:<br>
  <input type="text" name="saturn">
  <br>
  Uranus:<br>
  <input type="text" name="uranus">
  <br>
  Neptune:<br>
  <input type="text" name="neptune">
  <br>
  Pluto:<br>
  <input type="text" name="pluto">
  <br>
  Sun:<br>
  <input type="text" name="sun">
  <br>
  Moon:<br>
  <input type="text" name="moon">
  <br>
  <input type="submit" value="Calculate" id="submit">
</form>