javascript - 单击按钮时未显示结果 - HTML、JavaScript

Question

我的代码有问题。当我尝试单击按钮时，结果未显示。我认为我的按钮不起作用，或者我的 js 代码错误。

function val() {
  var g = parseFloat(document.getElementById("textvalue").value);
  document.getElementById("result").innerHTML = g + "g is " + (g / 1000) + " kg";
};

<section>
  <div class="container">
    <div class="row">
      <div class="col-xl-12">
        <h1>convert grams(g) to kilograms(kg) </h1>
      </div>
    </div>
  </div>

  <div class="container" id="main-content">
    <div class="row">
      <div class="col">
        <div class="input-group input-group-newsletter mb-5">
          <input type="string" class="form-control" placeholder="Enter value" id="textvalue">
        </div>
        <button type="button" class="btn btn-dark mt-1" id="cnvrtbutton" onclick="val()">Convert</button>
      </div>
      <div class="col" id="resultcol">
        <p id="result"> Result is here!</p>
      </div>
    </div>
  </div>

标签： javascripthtmlcss

Answer 1

将以下代码粘贴到您的 HTML 文件中，它应该可以正常工作（因为它在您的问题中工作正常）。我认为您可能没有正确链接 JS 文件，因此建议您只在 HTML 文件中包含 JS 代码。

      <div class="container">
        <div class="row">
          <div class="col-xl-12">
            <h1>convert grams(g) to kilograms(kg) </h1>
          </div>
        </div>
      </div>

      <div class="container" id="main-content">
        <div class="row">
          <div class="col">
            <div class="input-group input-group-newsletter mb-5">
              <input type="string" class="form-control" placeholder="Enter value" id="textvalue">
            </div>
            <button type="button" class="btn btn-dark mt-1" id="cnvrtbutton" onclick="val()">Convert</button>
          </div>
          <div class="col" id="resultcol">
            <p id="result"> Result is here!</p>
          </div>
        </div>
      </div>
   <script>
    function val() {
      var g = parseFloat(document.getElementById("textvalue").value);
      document.getElementById("result").innerHTML = g + "g is " + (g / 1000) + " kg";
    };
</script>