Question

所以，我试图为我的计算机科学课构建一个十进制到二进制的转换器。我已经在Python中创建了一个似乎运行良好的算法。它在Javascript控制台中的工作也很完美。我现在正试图接受来自HTML表单的输入。我是一个DOM菜鸟，但我认为这将是一件轻松而有趣的事情，但事实证明它比我想象的要复杂得多。我会知道如何在React.js中做到这一点，但我试图将其用作学习经验。基本上，我想从表单中获取输入，通过函数运行它并将函数的返回值返回到HTML中。我知道如何将值转换为HTML，但我不知道如何将表单数据检索到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();
});

Answer 1

她做一个你想要完成的事情的简单方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您想要在单击提交时将答案放回要显示的页面上吗？

首先你需要一个容器（好吧，你可以在Javascript中动态创建一个容器，但通常你只需要创建一个空的div容器来保存答案）。

为解决方案添加div容器:(可能在表单之后）

＆＃13;

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

＆＃13;

看起来您正在使用jQuery，这使得将HTML轻松输入目标。

将此添加到转换功能：

＆＃13;

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

＆＃13;

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

从您提供的HTML / JS开始提供几个提示：

你在普通JS中使用jQuery选择器，所以这不会起作用：

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

将其更改为

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

如果你想使用普通的JavaScript - 或者用jQuery的方式，就像这样

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

您也可以在var中预先存储对该DOM元素的引用，然后对其进行处理，但这是另一个主题。

此外，您必须将formValue传递给转换函数，如此

conversion(formValue);

否则您无法使用函数范围内的输入值。

剩下要做的就是将结果值写入某些内部HTML。其他答案为您提供了两种选择：jQuery（innerHTML）或普通的旧JavaScript。

麻烦将HTML输入到JS

4 个答案: