如何在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財產不innerHTML擺脫輸入元素的值。
• 獲取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 2

試試這個：

使用.value獲得輸入框中的輸入的值。

獲取裏面的值調用功能，讓您可以在輸入框輸入獲得價值

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

上面的代碼應該來，我們需要得到後的輸入值，點擊event.because內它進入了。我的回答如下

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