如何在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中输入值

＆＃13;

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，如果您使用的是jQuery：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试RewriteRule ^babycare/article/category/([0-9]+)$ babycare/general_help/category.php?id=$1

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

  

参考：Js Fiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

HTML UPDATE

<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');
            });
        });