How do I take a user's input and store it to be used in a Javascript function?

Question

Absolute beginner and trying to create a very simple decimal to binary converter. I know there exist easier/cleaner ways built into Javascript for converting to different number bases, but I liked creating my own script from scratch. Here's the code:

<!DOCTYPE html>
<html>
<head>
  <title>GetBit</title>
</head>
<body>

  <h1>Decimal to Binary</h1>
    <p><input type="number" min="0" id="decimal"</p>
    <button type="button" onclick="getBit()">Submit</button>
    <p>here is your answer:</p><p id="binary"></p>


<script>
function getBit() {
  var n = document.getElementById("decimal").value;
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
  var bit = document.getElementById("binary").innerHTML;
}


</script>
</body>
</html>

I am sure this is atrocious code, but I am doing trial by fire. Really, on the whole, I would like to understand better how user input and Javascript functions interact, and the best practice for placing user input into variables and then using those value to output a new value (like taking a decimal number and outputting binary).

I had tested my getBit() function in the console, and it returned the correct binary. I changed it slightly for my HTML. Here's the original JS that worked:

function getBit(n, bit = "") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = 1 + "" + bit;
    return bit
  }
}

I'm stumped on how this should be translated into a element in HTML. Any help is appreciated.

Also note that your first input is not closed.

wazz
– wazz

2019-10-27 00:09:09 +00:00
Commented Oct 27, 2019 at 0:09 — wazz
– wazz, Commented Oct 27, 2019 at 0:09

Carsten Massmann · Accepted Answer · 2019-10-27 07:30:38Z

1

You need to turn your expression around:

document.getElementById("binary").innerHTML = bit

Your original expression would have assigned the current HTML-content of the chosen DOM element into your variable bit.

document.querySelector('#decimal').addEventListener('input',function(ev){
   document.getElementById("binary").innerHTML=getBit(ev.target.value)});
   
function getBit(n, bit="") {
  if (n >= 2) {
    bit = (n % 2) + "" + bit;
    return getBit(n = Math.floor(n/2), bit)
  } else {
    bit = +n + "" + bit;
    return bit
  }
}

<h1>Decimal to Binary</h1>
<p><input type="number" min="0" id="decimal" placeholder="enter a decimal number">
<p>in binary this is:</p>
<p id="binary"></p>

I changed my event listener to look for input events now and also the statement in your else condition to bit = +n + "" + bit; as otherwise the decimal 0 would have been "converted" to 1.

edited Oct 27, 2019 at 7:30

answered Oct 26, 2019 at 20:11

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wazz Over a year ago

Fwiw, keyup doesn't work with a 'number' input (number scroll-wheel), the value has to be typed-in.

Carsten Massmann Over a year ago

Interesting to hear. These input types seem to be handled differently depending on browser and OS used. It works fine in my (old) Android phone.

Carsten Massmann Over a year ago

Maybe this can help: stackoverflow.com/a/45396364/2610061 ?

Carsten Massmann Over a year ago

And maybe the input event works for your number scroll-wheel too now? I just changed my post.

wazz Over a year ago

That works for me now. Checked Chrome and FFox. (Btw, 3 missing semicolons at the ends of statements).

|

Collectives™ on Stack Overflow

How do I take a user's input and store it to be used in a Javascript function?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related