jQuery/Javascript - 获取文本输入框的值，并显示在div

Question

我正在测试获取文本输入，并在下面的 div 中打印结果。但是，我看不到它能正常工作。

如果输入框的"placeholder"变成了"value"，就莫名其妙的起作用了。我可能只是累了，遗漏了一些明显的东西，但我终其一生都无法找出问题所在。

//Tested and didn't work
//var URL = document.getElementById("download")[0].value;
//var URL = document.getElementsByName("download")[0].value;

var URL = $('#download').val();

function downloadURL() {
    //Print to div
    document.getElementById("output").innerHTML = URL;
    //Test, just in case innerHTML wasn't working
    alert(URL);
}

<p><input type="text" name="download" id="download" placeholder="Download URL"></p>
<button onclick="downloadURL()">Test</button>
<div id="output"></div>

Answer 1

只是一个小改动，你必须在点击按钮时获取值，所以先保存对该字段的引用，然后在需要时获取值

var URL = $('#download');

function downloadURL(){
   //Print to div
   document.getElementById("output").innerHTML = URL.val();
   // alert(URL.val());
}

Answer 2

我建议您坚持使用 jQuery。让 jQuery 以不引人注目的方式运行，而不是依赖附加到 button.

的内联事件处理程序

<p> <input type="text" name="download" id="download" placeholder="Download URL"></p>
<button>Test</button> //remove the inline click handler                      
<div id="output"></div>

$('button').on('click', function() {
  var url = $('#download').val();
  $('#output').text(url); //or append(), or html(). See the documentation for further information 
});

Answer 3

对您的代码进行少量修改，使其可以与“Unobtrusive Javascript”对齐。

HTML

<p> 
    <input type="text" name="download" id="download" placeholder="Download URL">
</p>
<button id="btnDownloadUrl">Test</button>                          
<div id="output"></div>

jQuery

$(function(){
    $("#btnDownloadUrl").bind("click", function(){
        var downloadUrl = $("#download").val();
        $("#output").html(downloadUrl);
    });
});

Answer 4

如果你想去jQuery...

var URL = $('#download');

function downloadURL() {
    $("#output").html(URL.val());
}

... 或普通 JavaScript

var URL = document.getElementById("download") ;

function downloadURL() {
    document.getElementById("output").innerHTML = URL.value;
}

jQuery/Javascript - 获取文本输入框的值，并显示在div

jQuery/Javascript - Get value of text input field, and display in div

javascript

jquery