如何在javascript中获取输入文本值

Question

我想输出一个文本类型输入标签的操纵输入值，但它似乎比我想象的要难。 我不想使用alert或console.log类型的输出，而是作为新内容附加到页面。 在这里我没有操纵输入，因为我甚至无法输出它，这是我的第一个目标。

我对应部分的html代码是：

<div class="middle topic"> 

            <div id="inputnav">
                <button id="sendd">SEND</button>
            </div>

            <input type="text" value="" id="iPf">

            <div id="oPf">
            output
            </div>

 </div>  

这是完整的JavaScript。 在jquery-1.12.2.min.js链接之后，我在关闭body标签之前的html末尾链接了它。

/*global $, jQuery, alert*/

$(document).ready(function () {
"use strict";

var inPuttext = document.getElementById("iPf").innerHTML;
var outPutfield = document.getElementById("oPf");

function appendOutput(where, what) {
    where.innerHTML = what;
};

$('#sendd').click(function () {
    appendOutput(outPutfield, inPuttext);
});

}）;

我无法弄清楚为什么它不起作用。 当我点击发送按钮时，唯一发生的事情是“输出”从#oPf div中消失。

Answer 1

尝试这个：

使用.value获取输入框的输入值。

获取调用函数内的值，以便您可以在inputbox中输入值

 $(document).ready(function () { "use strict"; function appendOutput(where, what) { where.innerHTML = what; }; $('#sendd').click(function () { var inPuttext = document.getElementById("iPf").value; // use .value to get entered value of input box , get value inside calling function so that you can get entered value in inputbox var outPutfield = document.getElementById("oPf"); appendOutput(outPutfield, inPuttext); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="middle topic"> <div id="inputnav"> <button id="sendd">SEND</button> </div> <input type="text" value="" id="iPf"> <div id="oPf"> output </div> </div> 

Answer 2

• 使用value属性而不是innerHTML来从input元素获取值。
• 获取click处理程序中的值以获取更新的值。

 $(document).ready(function() { "use strict"; var outPutfield = document.getElementById("oPf"); function appendOutput(where, what) { where.innerHTML = what; }; $('#sendd').click(function() { var inPuttext = document.getElementById("iPf").value; appendOutput(outPutfield, inPuttext); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="middle topic"> <div id="inputnav"> <button id="sendd">SEND</button> </div> <input type="text" value="" id="iPf"> <div id="oPf"> output </div> </div> 

但是，如果你使用jQuery ：

 $(document).ready(function() { "use strict"; $('#sendd').click(function() { $('#oPf').html($("#iPf").val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="middle topic"> <div id="inputnav"> <button id="sendd">SEND</button> </div> <input type="text" value="" id="iPf"> <div id="oPf"> output </div> </div> 

Answer 3

尝试$("#oPf").html($("#iPf").val());

$('#sendd').click(function() {
   $("#oPf").html($("#iPf").val());
 });

参考： Js Fiddle

 $('#sendd').click(function() { $("#oPf").html($("#iPf").val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="middle topic"> <div id="inputnav"> <button id="sendd">SEND</button> </div> <input type="text" value="" id="iPf"> <div id="oPf"> output </div> </div> 

Answer 4

只需添加此项，您将获得输出div中的输出。

HTML更新

<div id="inputnav">
            <button id="sendd" onClick="fn()">SEND</button>
</div>

JAVASCRIPT UPDATE

function fn(){
var inPuttext = document.getElementById("iPf").value;
document.getElementById("oPf").innerHTML = inPuttext;
}

Answer 5

inPuttext应该是

var inPuttext =document.getElementById("iPf").value

上面的代码应该进入click事件。因为我们需要在输入后得到输入值。我的回答如下

 $(document).ready(function () {
            "use strict";


            var outPutfield = document.getElementById("oPf");

            function appendOutput(where, what) {
                console.log(what);
                where.innerHTML = what;
            }
            ;

            $('#sendd').click(function () {
                var inPuttext = document.getElementById("iPf").value;
                appendOutput(outPutfield, inPuttext);
                console.log('asd');
            });
        });