Question

我正在使用一个HTML页面，我有多个文本框输入，比方说五个。我有一个提交按钮。一旦我在文本框中输入所有值并点击提交，我希望所有值都以升序显示在文档上的提交按钮下面的区域中。我想对所有值进行排序以显示结果。我只是使用一个数组来测试我的概念是否正确，但没有运气。任何人都可以帮助高度赞赏。

这是代码：

function myFunction() {
    var txt = new array[];
    var txt[0] = $('input:text[name=text1]').val();
    var txt[1] = $('input:text[name=text2]').val();
    var txt[2] = $('input:text[name=text3]').val();
    var txt[3] = $('input:text[name=text4]').val();
    var txt[4] = $('input:text[name=text5]').val();
    txt.sort();
    for (var i = 0; i < txt.length; i++) {
        document.getElementById('txt[i]').value + ' ';
    }
}

Answer 1

.text-1, .text-2等是输入字段的类。 .val()会在用户点击您的提交按钮后获得用户输入。最后一行创建一个新div并将用户输入附加到结果div。

$('.submit-button').on('click', function() {
    aaa = $('.text-1').val();
    bbb = $('.text-2').val();
    ccc = $('.text-3').val();
    ddd = $('.text-4').val();
    eee = $('.text-5').val();
        $('<div>' + aaa + '<br />' + bbb + '<br />' + ccc + '<br />' + ccc + '<br />' + ddd + '<br />' + eee + '</div>').appendTo('.results-div');
});

Answer 2

这是一个小提琴，可以完成我认为你想做的事情：

http://jsfiddle.net/KjHB3/3/

以下是HTML代码：

<input type="text" name="text1" id="text1" /><br/>
<input type="text" name="text2" id="text2" /><br/>
<input type="text" name="text3" id="text3" /><br/>
<input type="text" name="text4" id="text4" /><br/>
<input type="text" name="text5" id="text5" /><br/>
<input type="button" value="submit" id="submit" />
<div id="result">replace</div>

以下是javascript代码：

$("#submit").click(function() {

// Extract all the values into an array
var valArray = [];
$("input[type=text]").each(function(index, el) {
    valArray[index] = jQuery(el).val();
});

// Output list of values (in order they appear in form)    
$("#result").html("In order of text box: <ol id='list1'></ol>");
$.each(valArray, function(index, value) {        
    $("#list1").append("<li>" + value + "</li>");
});

// Output list of values (in sorted order)
$("#result").append("In sorted order: <ol id='list2'></ol>");
valArray = valArray.sort();
$.each(valArray, function(index, value) {
    if (value != null && value != "") {
        $("#list2").append("<li>" + value + "</li>");
    }
});

});

Answer 3

您的代码似乎是正确的，但行document.getElementById('txt[i]').value + ' ';除外。没有什么可以将值写回文档。

首先，从选择器开始，您需要将'txt[i]'更改为'text'+i，因为浏览器正在查找标识为txt[i]且未找到任何内容的元素，因此无需执行任何操作。此外，你应该使用jQuery，因为它使一切更简洁。

然后，要回写文档，您需要设置值。您当前的代码（.value + ' ';）所做的是获取值，然后将其添加到字符串' '，然后语句结束。您需要做的是使用jQuery（.val(txt[i]);）或stock Javascript（.value = txt[i];）设置字符串的值。

因此，总而言之，只需将代码中for循环中的代码与此行交换：

$("input:text[name=text"+i+"]").val(txt[i]);

Answer 4

让我分两部分分析你的代码，以说明它为什么还没有工作。

function GetInputValues() {
    var txt = new array[];
    var txt[0] = $('input:text[name=text1]').val();
    var txt[1] = $('input:text[name=text2]').val();
    var txt[2] = $('input:text[name=text3]').val();
    var txt[3] = $('input:text[name=text4]').val();
    var txt[4] = $('input:text[name=text5]').val();
    txt.sort();
    return txt; // added by me to encapsulate getting the values
}

function myFunction()的第一部分是正确的。您正在使用jQuery获取输入框的值并将值写入数组。

第二部分有一些错误：

for (var i = 0; i < txt.length; i++) {
    document.getElementById('txt[i]').value + ' ';
}

function document.getElementById("lastname")返回id为lastname的html元素。因此，在for循环中，您尝试获取值，但是您已经拥有数组txt中的值。最重要的是，'txt[i]'只是一个字符串。所以javascript试图找到一个匹配<... id="txt[i]" ...>的元素。但是您不希望获得要将值写回文档的值。假设你有一个像<div id='txt[i]'> ...</div>这样的div，你可以这样编写你的代码：

for (var i = 0; i < txt.length; i++) {
    document.getElementById('txt[i]').innerHTML += txt[i];
}

另一种方法是加入数组：

var myInputValues = GetInputValues(); // this returns your array txt
document.getElementById('myResult').InnerHTML = myInputValues.join(", ");

这假设您有一个id = myResult的元素，例如<div id='myResult'>..</div>

更新以解决代码中的问题

Your fiddle有这一部分：

myFunction(txt) {  // <-- function declaration: there is something missing here
    var myInputValues = GetInputValues(); // this returns your array txt
    document.getElementById('myResult').InnerHTML = myInputValues.join(", ");
} //<--- this is the end of myfunction
}); // <-- these do not belong here
// you never execute myFunction

您必须定义该函数，然后再调用它。由于你的错误是如此基本我真的建议开始学习javascript的教程。我可以推荐Eloquent JavaScript：

至learn the basics of functions
了解有关Document-Object Model

以升序显示多个html文本框值

4 个答案:

更新以解决代码中的问题