Converting a value using JavaScript

Question

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>

@Paul Digging for a dupe. This question's been asked plenty of times, so I didn't feel good about answering it. It seems to be a combination of 3 or 4 commonly asked questions though. (`value` instead of `innerHTML`, placement of ` — Tyler Roper, Oct 12 '18 at 17:15
Input elements don't have an `innerHMTL` property. They have a `value`. So `document.getElementById("nM").innerHTML` should be `document.getElementById("nM").value`. There **also** appears to be an issue with namiing your function `calculate`. — j08691, Oct 12 '18 at 17:16
Remove `return` from `onclick="return calculate();"`, make it `onclick="calculate"`. I doubt it's even legal there. — Frax, Oct 12 '18 at 17:16
[Here's the answer I would have completed before it got closed](https://jsfiddle.net/1hwxsakb/) - it might help you out. — Andy, Oct 12 '18 at 17:19
@Frax Nothing wrong with that, albeit unnecessary in this case. But it's useful if you want to validate a form and submit based on the result, ie `onclick="return formIsValid();"` - If `formIsValid()` returns `false`, the form will not submit. — Tyler Roper, Oct 12 '18 at 17:20
^ Correction, this is actually exactly what OP is doing. His function returns `false`, therefore the form will not submit, which also means my first comment was unnecessary. — Tyler Roper, Oct 12 '18 at 17:28

Chayan · Answer 1 · 2018-10-12T17:31:58.900

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>

Some sort of explanation would be nice. Code dumps don't make for good answers and no one like playing spot-the-difference — j08691, Oct 12 '18 at 17:31

j08691 · Accepted Answer · 2018-10-12T17:39:14.267

2

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

Input elements don't have an innerHMTL property. They have a value. So document.getElementById("nM").innerHTML should be document.getElementById("nM").value
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>

edited Oct 12 '18 at 17:39

answered Oct 12 '18 at 17:29

j08691

204,283
31
260
272

1

Nice job finding that `calculate()` naming bug! Although it seems to be alright in Chayan's answer? – Tyler Roper Oct 12 '18 at 17:30
It worked now..I got the point.. is "calculate()" a reserved keyword/name? – BlockeeR Oct 12 '18 at 17:35
2

I think it's because the global `calculate` is referring to the `id` of the element, rather than the function. – Tyler Roper Oct 12 '18 at 17:36
2

@BlockeeR Tyler's correct. I'll clarify my answer. It's very old behavior but most browsers still automatically create global variables from elements with IDs. See https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables – j08691 Oct 12 '18 at 17:38

score 1 · Answer 3 · answered Oct 12 '18 at 17:23

1

You should use value instead of innerHTML:

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

answered Oct 12 '18 at 17:23

Eugene Tsakh

2,777
2
14
27

Converting a value using JavaScript

3 Answers3