making a unit converter by javascript and html

Question

function convertion() {
  let inputValue = number(document.getElementById('firstValue').value);
  let result = document.getElementById('secondValue');
  result.innerHTML = inputValue * 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1" />

</head>

<body>

  <main>
    <label for="firstValue">dm: </label>
    <input id="firstValue" type='number'>
    <button onclick="convertion()">
  CONVERT
  </button>
    <br/>
    <br/>
    <label for="secondValue">cm: </label>
    <input id="secondValue" readonly>
  </main>
</body>

</html>

This is a dm-cm converter I don't know why it doesn't work. I think there's an error in the script. I also don't know how to use the number function in this line:

let inputValue = number(document.getElementById('firstValue').value)

I like how someone just marked as duplicate with a non-related thread — J. Gandra, Jul 27 '20 at 19:27
MostafaShaker, you need to be watching for errors. Try running the code snippet you provided and you'll get one - the snippet engine will kindly surface it for you, but you need to watch for them development time going forward. That's why it's closed like that @J. Gandra - the real question is, how do I change my string into a number. — erik258, Jul 27 '20 at 19:30
His error was trying to access the value of a input using innerHTML, like @DCR pointed out. There was no need to change number to string. — J. Gandra, Jul 27 '20 at 19:51

DCR · Accepted Answer · 2020-07-27T19:58:47.340

1

input boxes don't have innerHTML use value instead

function convertion() {
  let inputValue = document.getElementById('firstValue').value;
  console.log(inputValue);
  let result = document.getElementById('secondValue');
  result.value = inputValue * 10;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1" />

</head>

<body>

  <main>
    <label for="firstValue">dm: </label>
    <input id="firstValue" type='number' onchange="convertion()">
    
  CONVERT
  </button>
    <br/>
    <br/>
    <label for="secondValue">cm: </label>
    <input id="secondValue" readonly>
  </main>
</body>

</html>

edited Jul 27 '20 at 19:58

answered Jul 27 '20 at 19:23

DCR

14,737
12
52
115

Thank you for your answer. but what if I wanted to make it convert automatically without a button – Mostafa Shaker Jul 27 '20 at 19:55
then delete the button and use onchange on the first input. snippet updated – DCR Jul 27 '20 at 19:59

making a unit converter by javascript and html

1 Answers1