Trouble Getting HTML Input Into JS

Question

So, I'm trying to build a decimal to binary converter for my computer science class. I already made an algorithm in Python that seems to be working pretty well. It works in the Javascript console perfectly fine too. I'm now at a point trying to accept input from an HTML form. I'm kind of a DOM noob, but I thought this would be something easy and fun to do, but it's turning out that it's a lot more confusing than I thought. I would know how to do this in React.js, but I'm trying to use this as a learning experience. Basically, I want to take input from a form, run it through a function and have the returned value of the function back into HTML. I know how to get the value into HTML, but I have no clue how to retrieve the form data into Javascript. Here's a Codepen with my progress so far.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Javascript Binary Calculator</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>

    <center><form style="margin-top: 25%" id="myForm">
      <input type="text" class="form-control" style="width: 250px" placeholder="Type a number!" id="textForm">
      <br />
      <input type="button" class="btn" style="margin-top: 15px" value="Submit">
    </form></center>
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
    <script src="script.js" type="text/javascript"></script>
  </body>
</html>

Javascript:

function conversion(){
    var quotient = 15;
    var convertedNum = [];
    if (formValue == 0){
      convertedNum = [0]
    }
    while(formValue >= 1){
      quotient = formValue/2;
      var mod = formValue %2;
      formValue = quotient;
      convertedNum.push(mod);
      convertedNum.reverse();
    }
    console.log(convertedNum.join(""));
}



$('#textForm').change(function(){
  var formValue = document.getElementById('#textForm').value;
  parseInt(formValue);
  console.log(formValue);
  console.log("It's Working in Console!");
  conversion();
});

Your progress link is taking us to a 404 error page.

Moses Davidowitz
– Moses Davidowitz

2017-01-26 23:37:16 +00:00
Commented Jan 26, 2017 at 23:37 — Moses Davidowitz
– Moses Davidowitz, Commented Jan 26, 2017 at 23:37

Moses Davidowitz · Accepted Answer · 2017-01-26 23:41:43Z

2

Her's a simple way doing what you are trying to accomplish.

function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

<body>

First Name: <input type="text" id="myText" >

<p>Click the button to display the value of the value attribute of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

answered Jan 26, 2017 at 23:41

Moses Davidowitz

97012 silver badges29 bronze badges

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

Comments

Peter S. · Accepted Answer · 2017-01-26 23:43:43Z

0

You want to put the answer back onto the page to be displayed when they click submit?

First you'll need a container (well, you can create one on the fly in Javascript, but typically you would just create an empty div container to hold the answer).

Add a div container for the solution: (after form probably)

<div id="convertedToBinary" class="answerDiv"></div>

It looks like you're using jQuery, which makes entering HTML into a target easy.

Add this to your conversion function:

$('#convertedToBinary').html(formValue+" converted to binary is: "+convertedNum.join("") );

answered Jan 26, 2017 at 23:43

Peter S.

214 bronze badges

Comments

Farzin Kanzi · Accepted Answer · 2017-01-27 00:14:08Z

<head>
    <title></title>
    <script
        src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
</head>
<body>
    <input type="text" class="form-control" />
    <span id="result"></span>
    <script>
        var formValue;
        function conversion()
        {
            var quotient = 15;
            var convertedNum = [];
            if (formValue == 0)
            {
                convertedNum = [0]
            }
            while (formValue >= 1)
            {
                quotient = parseInt(formValue / 2);
                var mod = formValue % 2;
                formValue = quotient;
                convertedNum.push(mod);
                convertedNum.reverse();
            }
            $('#result').html(convertedNum.join(""));
        }
        $('.form-control').keydown(function ()
        {
            var $this = $(this);
            setTimeout(function ()
            {
                formValue = $this.val();
                conversion();
            }, 100);
        });
    </script>
</body>
</html>

benbue · Accepted Answer · 2017-01-27 00:18:17Z

Just a couple of hints starting from the HTML / JS you provided:

You are using a jQuery selector within plain JS, so this won't work:

var formValue = document.getElementById('#textForm').value;

Change that to

var formValue = document.getElementById('textForm').value;

if you want to use plain JavaScript - or do it the jQuery way, like so

var formValue = $('#textForm').value;

You could also have stored the reference to that DOM element in a var, up front, and then work on that, but that's another topic.

Also you must pass the formValue to the conversion function, like so

conversion(formValue);

otherwise you can't work with the input value within the function scope.

All that remains to do is writing the resulting value into the innerHTML of some . The other answers give you two options for doing that - in jQuery (innerHTML) or plain old JavaScript.

Collectives™ on Stack Overflow

Trouble Getting HTML Input Into JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related