无法将HTML输入输入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. 我已经在Python中建立了一种算法，该算法似乎运行良好。 It works in the Javascript console perfectly fine too. 它也可以在Javascript控制台中正常运行。 I'm now at a point trying to accept input from an HTML form. 我现在正在尝试接受HTML表单的输入。 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. 我有点像DOM菜鸟，但是我认为这样做很容易并且很有趣，但是事实证明，这比我想象的要混乱得多。 I would know how to do this in React.js, but I'm trying to use this as a learning experience. 我知道如何在React.js中做到这一点，但我正在尝试将其作为学习经验。 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. 基本上，我想从表单中获取输入，通过函数运行它，并将函数的返回值返回到HTML中。 I know how to get the value into HTML, but I have no clue how to retrieve the form data into Javascript. 我知道如何将值转换为HTML，但不知道如何将表单数据转换为Javascript。 Here's a Codepen with my progress so far. 这是到目前为止我的进度的Codepen。

HTML: 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: 使用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();
});

Answer 1

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>

Answer 2

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). 首先，您需要一个容器（可以在Java中动态创建一个容器，但是通常您只需要创建一个空的div容器来保存答案即可）。

Add a div container for the solution: (after form probably) 为解决方案添加一个div容器：（可能在表单之后）

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

It looks like you're using jQuery, which makes entering HTML into a target easy. 看起来您正在使用jQuery，这使将HTML输入目标变得容易。

Add this to your conversion function: 将此添加到您的转换函数：

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

Answer 3

 <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>

Answer 4

Just a couple of hints starting from the HTML / JS you provided: 从您提供的HTML / JS开始，只有几点提示：

You are using a jQuery selector within plain JS, so this won't work: 您在纯JS中使用jQuery选择器，因此无法使用：

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 如果您想使用普通的JavaScript-或使用jQuery方式，例如

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. 您也可以预先在var中存储对该DOM元素的引用，然后进行处理，但这是另一个主题。

Also you must pass the formValue to the conversion function, like so 同样，您必须将formValue传递给转换函数，如下所示

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 . 剩下要做的就是将结果值写入some的innerHTML中。 The other answers give you two options for doing that - in jQuery (innerHTML) or plain old JavaScript. 其他答案为您提供了两种选择-使用jQuery（innerHTML）或普通的旧JavaScript。

无法将HTML输入输入JS

问题描述

4 个解决方案

解决方案1
2 2017-01-26 23:41:43

解决方案2
0 2017-01-26 23:43:43

解决方案3
0 2017-01-26 23:48:10

解决方案4
0 2017-01-27 00:18:17

无法将HTML输入输入JS

问题描述

4 个解决方案

解决方案1 2 2017-01-26 23:41:43

解决方案2 0 2017-01-26 23:43:43

解决方案3 0 2017-01-26 23:48:10

解决方案4 0 2017-01-27 00:18:17

解决方案1
2 2017-01-26 23:41:43

解决方案2
0 2017-01-26 23:43:43

解决方案3
0 2017-01-26 23:48:10

解决方案4
0 2017-01-27 00:18:17