CODEWITHSUNDEEP
javascripthtml
BlockeeR
BlockeeR

Reputation: 241

Converting a value using JavaScript

Somehow my below JavaScript code to convert the value from kilometers to nautical mile doesn't seem to work. It seems very simple but I could not find out why I am. I would appreciate your help.

<div class="calculator">
  <form>
    Enter a value in Kilometers:
    <input type="text" id="kM" value="1000"> Result in Nautical Mile:
    <input type="text" id="nM" value="" disabled>
    <button onclick="return calculate();" id="calculate">CALCULATE</button>
  </form>
</div>

<script>
  function convert(kiloMeter) {
    return kiloMeter / 1.852;
  }

  function calculate() {
    var kMeter = Number(document.getElementById("kM").value);
    var convertedValue = convert(kMeter);
    document.getElementById("nM").innerHTML =
      convertedValue;
    return false;
  }
</script>

Upvotes: 0

Views: 319

Answers (3)

j08691
j08691

Reputation: 207901

There are at least two issues causing your script to not work

  1. Input elements don't have an innerHMTL property. They have a value. So document.getElementById("nM").innerHTML should be document.getElementById("nM").value

  2. At that point everything should be fine. You shouldn't need to change your button type to button since you return false from the function and the button returns false to the form, stopping the form from submitting. HOWEVER there appears to be an issue with naming your function calculate (at least in Chrome and Firefox) the same as the id of the element (id="calculate"). Changing the name of the function or the id fixes the issue.

function convert(kiloMeter) {
    return kiloMeter / 1.852;
  }

  function calculate() {
    var kMeter = Number(document.getElementById("kM").value);
    var convertedValue = convert(kMeter);
    document.getElementById("nM").value = convertedValue;
    return false;
  }
<div class="calculator">
  <form>
    Enter a value in Kilometers:
    <input type="text" id="kM" value="1000"> Result in Nautical Mile:
    <input type="text" id="nM" value="" disabled>
    <button onclick="return calculate();"  id="xcalculate">CALCULATE</button>
  </form>
</div>

Upvotes: 2

Chayan
Chayan

Reputation: 614

For input tag you should use value rather than innerHtml. You do not need to return false also.

<div class="calculator">
  <form>
    Enter a value in Kilometers:
    <input type="text" id="kM" value="1000"> Result in Nautical Mile:
    <input type="text" id="nM" value="" disabled>
    <button type='button' onclick="calculate()" id="">CALCULATE</button>
  </form>
</div>

<script>
  function convert(kiloMeter) {
    return kiloMeter / 1.852;
  }

  function calculate() {
     var kMeter = Number(document.getElementById("kM").value);
    var convertedValue = convert(kMeter);
    document.getElementById("nM").value =
      convertedValue;
  }
</script>

Upvotes: 2

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

You should use value instead of innerHTML:

document.getElementById("nM").value = convertedValue;

Upvotes: 1

Related Questions