CODEWITHSUNDEEP
javascripthtmlcss
margaux_xx
margaux_xx

Reputation: 23

Result not showing when button is clicked - HTML, JavaScript

I am having problems with my code. When I try to click the button, the result is not showing. I think my button is not working, or my js code is wrong.

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>

Upvotes: 0

Views: 574

Answers (1)

Ch Asad Ur Rehman
Ch Asad Ur Rehman

Reputation: 111

paste below code into your HTML file and it should work fine (as it is working fine in your question). I think you might not be linking the JS file correctly so suggestion you to just include the JS code in HTML file.

      <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>

Upvotes: 2

Related Questions