Question

我正在测试获取文本输入，并将结果打印在下面的div中。但是，我无法让它发挥作用。

如果＆＃34;占位符＆＃34;将输入字段输入到＆＃34;值＆＃34;，它莫名其妙地起作用。我可能只是感到疲倦，并且遗漏了一些明显的东西，但我不能为我的生活弄清楚什么是错的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

return("The future value is: " + step3);

Answer 2

如果你想去jQuery ......

var URL = $('#download');

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

...或纯JavaScript

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

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

Answer 3

我建议你坚持使用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 4

对您的代码进行微小修改，以便可以将其与“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);
    });
});

jQuery / Javascript - 获取文本输入字段的值，并以div显示

4 个答案: