Javascript 计算您在不同星球上的体重时出错

Question

我正在制作一个工具来计算你在不同星球上的体重。我不知道为什么，但我的代码不起作用。我附上了它。问题在于 javascript。有人请帮助我。

我已将我的代码放在这里：https://www.w3schools.com/code/tryit.asp?filename=GQKHM7XCL3KM

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your weight on different planets</title>

  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Cardo&family=Oswald&display=swap" rel="stylesheet">
  <style>
    .weightbackground {
      background-image: url("images/weight background.jpg");
      position: absolute;
      height: 800px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: table;
      width: 100%;
      height: 100%;
      z-index: 5;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: black
    }
    
    html {
      overflow-x: hidden;
    }
    
    .weight-first,
    h4 {
      font-family: 'Oswald', sans-serif;
      color: white;
      text-transform: uppercase;
      font-size: 35px;
    }
    
    .weight-second {
      padding: 50px;
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
      font-size: 20px;
    }
    
    input {
      border-radius: 25px;
      width: 85px;
      font-size: 25px;
    }
    
    input:invalid {
      border: 3px solid red;
    }
    
    span {
      font-size: 25px;
    }
    
    .mybut {
      background-color: cyan;
      font-size: 20px;
    }
    
    .mybut:hover {
      cursor: pointer;
    }
    
    .planet {
      width: 200px;
      padding: 10px;
      text-align: center;
    }
    
    .planet img {
      margin-bottom: 1rem;
    }
    
    .planet p {
      margin-bottom: 0.2rem;
    }
    
    p {
      line-height: 1.5em;
      font-size: .9em;
      padding: 50px;
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
    }
    
    .milkyway {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: 2rem 0;
    }
    
    .ow {
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
      font-size: 15px;
    }
  </style>
</head>

<body class="weightbackground">
  <br>
  <br>
  <center>
    <h1 class="weight-first">Your weight on differnet planets</h1>
    <br>
    <br>
    <br>
    <h2 class="weight-second">Your weight is different on other planets in the Solar System because the gravity is different.<br>To find out your weight on other planets without actually going there, you can use <br>our free tool to find out your weight on different planets. The
      units will remain same</h2>
  </center>
  <br>
  <br>
  <br>
  <center>
    <h3 class="weight-first">Enter your weight</h3>
    <br>
    <br>
    <div class="row">
      <input id="hellohowareyou" type="number" pattern="[0-9]+"> &nbsp &nbsp<span class="weight-first">KG</span> &nbsp &nbsp<button onclick="Calculate" ();>Submit</button>
    </div>
    <br>
    <br>
    <div class="milkyway">
      <div class="planet">
        <h4>
          MERCURY
        </h4>
        <a href="http://www.nineplanets.org/mercury.html"><img src="images/mercury.gif" alt="Mercury"></a>
        <br><span class="ow" id="mw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          VENUS
        </h4>
        <a href="http://www.nineplanets.org/venus.html"><img src="images/venus.gif" alt="Venus"></a>
        <br><span class="ow" id="vw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          THE MOON
        </h4>
        <a href="http://www.nineplanets.org/luna.html"><img src="images/moon.gif" alt="The Moon"></a>
        <br><span class="ow" id="tmw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          MARS
        </h4>
        <a href="http://www.nineplanets.org/mars.html"><img src="images/mars.gif" alt="Mars"></a>
        <br><span class="ow" id="msw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          JUPITER
        </h4>
        <a href="http://www.nineplanets.org/jupiter.html"><img src="./images/jupiter.gif" alt="Jupiter"></a>
        <br><span class="ow" id="jw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          SATURN
        </h4>
        <a href="http://www.nineplanets.org/saturn.html"><img src="./images/saturn.gif" alt="Saturn"></a>
        <br><span class="ow" id="sw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          URANUS
        </h4>
        <a href="http://www.nineplanets.org/uranus.html"><img src="./images/uranus.gif" alt="Uranus"></a>
        <br><span class="ow" id="uw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          NEPTUNE
        </h4>
        <a href="http://www.nineplanets.org/neptune.html"><img src="./images/neptune.gif" alt="Neptune"></a>
        <br><span class="ow" id="nw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          PLUTO
        </h4>
        <a href="http://www.nineplanets.org/pluto.html"><img src="./images/pluto.gif" alt="Pluto"></a>
        <br><span class="ow" id="pw">Your weight is:</span>
      </div>
    </div>
    <script>
      function Calculate() {
        var weight = document.getElementById("hellohowareyou").value;
        var mercury = weight * 0.37;
        var venus = weight * 0.91;
        var moon = weight * 0.166;
        var mars = weight * 0.38;
        var jupiter = weight * 2.34;
        var saturn = weight * 1.06;
        var uranus = weight * 0.92;
        var neptune = weight * 1.12;
        var pluto = weight * 0.06;
        document.getElementById("mw").innerHTML = "your weight is:" + mercury;
        document.getElementById("vw").innerHTML = "your weight is:" + venus;
        document.getElementById("tmw").innerHTML = "your weight is:" + moon;
        document.getElementById("msw").innerHTML = "your weight is:" + mars;
        document.getElementById("jw").innerHTML = "your weight is:" + jupiter;
        document.getElementById("sw").innerHTML = "your weight is:" + saturn;
        document.getElementById("uw").innerHTML = "your weight is:" + uranus;
        document.getElementById("nw").innerHTML = "your weight is:" + neptune;
        document.getElementById("pw").innerHTML = "your weight is:" + pluto;
      }
    </script>
</body>

</html>

Answer 1

您只需要从 onclick="Calculate" (); 更改为 onclick="Calculate();"

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your weight on different planets</title>

  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Cardo&family=Oswald&display=swap" rel="stylesheet">
  <style>
    .weightbackground {
      background-image: url("images/weight background.jpg");
      position: absolute;
      height: 800px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: table;
      width: 100%;
      height: 100%;
      z-index: 5;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: black
    }
    
    html {
      overflow-x: hidden;
    }
    
    .weight-first,
    h4 {
      font-family: 'Oswald', sans-serif;
      color: white;
      text-transform: uppercase;
      font-size: 35px;
    }
    
    .weight-second {
      padding: 50px;
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
      font-size: 20px;
    }
    
    input {
      border-radius: 25px;
      width: 85px;
      font-size: 25px;
    }
    
    input:invalid {
      border: 3px solid red;
    }
    
    span {
      font-size: 25px;
    }
    
    .mybut {
      background-color: cyan;
      font-size: 20px;
    }
    
    .mybut:hover {
      cursor: pointer;
    }
    
    .planet {
      width: 200px;
      padding: 10px;
      text-align: center;
    }
    
    .planet img {
      margin-bottom: 1rem;
    }
    
    .planet p {
      margin-bottom: 0.2rem;
    }
    
    p {
      line-height: 1.5em;
      font-size: .9em;
      padding: 50px;
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
    }
    
    .milkyway {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin: 2rem 0;
    }
    
    .ow {
      font-family: 'Cardo', serif;
      color: white;
      text-transform: lowercase;
      text-align-last: center;
      font-size: 15px;
    }
  </style>
</head>

<body class="weightbackground">
  <br>
  <br>
  <center>
    <h1 class="weight-first">Your weight on differnet planets</h1>
    <br>
    <br>
    <br>
    <h2 class="weight-second">Your weight is different on other planets in the Solar System because the gravity is different.<br>To find out your weight on other planets without actually going there, you can use <br>our free tool to find out your weight on different planets. The
      units will remain same</h2>
  </center>
  <br>
  <br>
  <br>
  <center>
    <h3 class="weight-first">Enter your weight</h3>
    <br>
    <br>
    <div class="row">
      <input id="hellohowareyou" type="number" pattern="[0-9]+"> &nbsp &nbsp<span class="weight-first">KG</span> &nbsp &nbsp<button onclick="Calculate();">Submit</button>
    </div>
    <br>
    <br>
    <div class="milkyway">
      <div class="planet">
        <h4>
          MERCURY
        </h4>
        <a href="http://www.nineplanets.org/mercury.html"><img src="images/mercury.gif" alt="Mercury"></a>
        <br><span class="ow" id="mw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          VENUS
        </h4>
        <a href="http://www.nineplanets.org/venus.html"><img src="images/venus.gif" alt="Venus"></a>
        <br><span class="ow" id="vw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          THE MOON
        </h4>
        <a href="http://www.nineplanets.org/luna.html"><img src="images/moon.gif" alt="The Moon"></a>
        <br><span class="ow" id="tmw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          MARS
        </h4>
        <a href="http://www.nineplanets.org/mars.html"><img src="images/mars.gif" alt="Mars"></a>
        <br><span class="ow" id="msw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          JUPITER
        </h4>
        <a href="http://www.nineplanets.org/jupiter.html"><img src="./images/jupiter.gif" alt="Jupiter"></a>
        <br><span class="ow" id="jw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          SATURN
        </h4>
        <a href="http://www.nineplanets.org/saturn.html"><img src="./images/saturn.gif" alt="Saturn"></a>
        <br><span class="ow" id="sw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          URANUS
        </h4>
        <a href="http://www.nineplanets.org/uranus.html"><img src="./images/uranus.gif" alt="Uranus"></a>
        <br><span class="ow" id="uw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          NEPTUNE
        </h4>
        <a href="http://www.nineplanets.org/neptune.html"><img src="./images/neptune.gif" alt="Neptune"></a>
        <br><span class="ow" id="nw">Your weight is:</span>
      </div>
      <div class="planet">
        <h4>
          PLUTO
        </h4>
        <a href="http://www.nineplanets.org/pluto.html"><img src="./images/pluto.gif" alt="Pluto"></a>
        <br><span class="ow" id="pw">Your weight is:</span>
      </div>
    </div>
    <script>
      function Calculate() {
        var weight = document.getElementById("hellohowareyou").value;
        var mercury = weight * 0.37;
        var venus = weight * 0.91;
        var moon = weight * 0.166;
        var mars = weight * 0.38;
        var jupiter = weight * 2.34;
        var saturn = weight * 1.06;
        var uranus = weight * 0.92;
        var neptune = weight * 1.12;
        var pluto = weight * 0.06;
        document.getElementById("mw").innerHTML = "your weight is:" + mercury;
        document.getElementById("vw").innerHTML = "your weight is:" + venus;
        document.getElementById("tmw").innerHTML = "your weight is:" + moon;
        document.getElementById("msw").innerHTML = "your weight is:" + mars;
        document.getElementById("jw").innerHTML = "your weight is:" + jupiter;
        document.getElementById("sw").innerHTML = "your weight is:" + saturn;
        document.getElementById("uw").innerHTML = "your weight is:" + uranus;
        document.getElementById("nw").innerHTML = "your weight is:" + neptune;
        document.getElementById("pw").innerHTML = "your weight is:" + pluto;
      }
    </script>
</body>

</html>

Answer 2

处理一般not a good idea to use inline event handlers. Here is a minimal reproducable example using Event Delegation

document.addEventListener("click", handle);

function handle(evt) {
  if (evt.target.id === "checkWeight") {
    return calculate()
  }
}

function calculate() {
  const weight = +document.querySelector("#earthWeight").value;
  if (!weight) {
    return alert("Nothing to do!");
  }
  const weights = {
    Earth: weight,
    Mercury: weight * 0.37,
    Venus: weight * 0.91,
    Moon: weight * 0.166,
    Mars: weight * 0.38,
    Jupiter: weight * 2.34,
    Saturn: weight * 1.06,
    Uranus: weight * 0.92,
    Neptune: weight * 1.12,
    Pluto: weight * 0.06,
  };
  const result = document.querySelector("#result");
  Object.entries(weights).forEach(([key, weight]) =>
    document.querySelector(`[data-planet="${key}"]`)
      .textContent = `${(weight || 1).toFixed(2)} kg`);
}

body {
  margin: 2rem;
  font: normal 12px/15px verdana, arial;
}

ul.planets-thumbnail-list {
  list-style-type: none;
}

ul.planets-thumbnail-list li img {
  width: 3rem;
  height: auto;
  vertical-align: middle;
}

<base href="https://nineplanets.org/wp-content/uploads/2019/09/" />
<input type="number" id="earthWeight" placeholder="earth weight" value=60> (kg)

<p>
  <button id="checkWeight">My weight on these planets?</button>
</p>

<ul class="planets-thumbnail-list">
  <li>
    <img class="wp-image-904" src="earth-150x150.png" alt="">
    <span class="list-name">Earth</span>
    <span data-planet="Earth"></span>
  </li>
  <li>
    <img class="wp-image-904" src="moon-150x150.png" alt="">
    <span class="list-name">Moon</span>
    <span data-planet="Moon"></span>
  </li>
  <li>
    <img class="wp-image-904" src="mercury-150x150.png" alt="">
    <span class="list-name">Mercury</span>
    <span data-planet="Mercury"></span>
  </li>
  <li>
    <img class="wp-image-904" src="venus-150x150.png" alt="">
    <span class="list-name">Venus</span>
    <span data-planet="Venus"></span>
  </li>
  <li>
    <img class="wp-image-904" src="mars-150x150.png" alt="">
    <span class="list-name">Mars</span>
    <span data-planet="Mars"></span>
  </li>
  <li>
    <img class="wp-image-904" src="jupiter-150x150.png" alt="">
    <span class="list-name">Jupiter</span>
    <span data-planet="Jupiter"></span>
  </li>
  <li>
    <img class="wp-image-904" src="saturn-150x150.png" alt="">
    <span class="list-name">Saturn</span>
    <span data-planet="Saturn"></span>
  </li>
  <li>
    <img class="wp-image-904" src="uranus-150x150.png" alt="">
    <span class="list-name">Uranus</span>
    <span data-planet="Uranus"></span>
  </li>
  <li>
    <img class="wp-image-904" src="neptune-150x150.png" alt="">
    <span class="list-name">Neptune</span>
    <span data-planet="Neptune"></span>
  </li>
  <li>
    <img class="wp-image-904" src="pluto-1-150x150.png" alt="">
    <span class="list-name">Pluto</span>
    <span data-planet="Pluto"></span>
  </li>

</ul>

Javascript 计算您在不同星球上的体重时出错

Javascript Error while calculating your weight on different planets

html

javascript

css

document

function