带有表单值的 Javascript While 循环答案

【问题标题】：Javascript While Loop with Form Values带有表单值的 Javascript While 循环
【发布时间】：2012-07-10 10:59:50
【问题描述】：

这是我正在研究的非常简单的东西的 sn-p（不幸的是，我在 Javascript 方面没有太多经验）。基本上，我需要按顺序打印多个动态文本字段的值（我假设动态是正确的词；可以根据需要添加或删除更多文本框）。它们的标签如下：

<li><input type="text" name="feature_1" id="feature_1" /></li>
<li><input type="text" name="feature_2" id="feature_2" /></li>
etc
etc

我一直在使用它来尝试从文本框中获取输入值。

amount = 4; //this is actually the total number of text boxes used
var count = 1;
while (count <= amount) {
        var feature_text = "form.feature_" + count + ".value";
        text += ("<li>" + feature_text + "</li>\n");
        count++;
    }

不幸的是，这个输出

<li>form.feature_1.value</li>
<li>form.feature_2.value</li>
<li>form.feature_3.value</li>
<li>form.feature_4.value</li>

而不是

<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
<li>Value 4</li>

如何让“feature_text”提取值而不是输出字符串？

【问题讨论】：

标签： javascript forms variables while-loop

【解决方案1】：

试试这个

var feature_text = document.getElementById("feature_" + count).value;

【讨论】：

做到了。天哪，我无法理解。非常感谢
你也可以text += '<li>'+form['feature_'+count].value+'</li>\n'

【解决方案2】：

你需要做这样的事情：

text = document.getElementById("form.feature_" + count).value;

【讨论】：

只要确保附加到text 变量+=，而不是重新分配值=。

【解决方案3】：

document.getElementById("theButton")

amount = 4; //this is actually the total number of text boxes used
var count = 1;
while (count <= amount) {
        var feature_text = "form.feature_" + count;
        text += ("<li>" + document.getElementById(feature_text).value + "</li>\n");
        count++;
    }

【讨论】：

【解决方案4】：

你得到的是一个字符串而不是实际值，因为这是你当前正在创建的：

var feature_text = "form.feature_" + count + ".value";

在文本周围使用引号 [""] 创建一个字符串值，而不是引用 DOM 元素。

如果可能，请通过实际 ID 引用元素：

var feature_text = document.getElementById('feature_' + count).value;

将代码移动到函数并使用 onclick 事件处理程序执行的更完整示例：

HTML：

<ul>
    <li><input type="text" name="feature_1" id="feature_1" /></li> 
    <li><input type="text" name="feature_2" id="feature_2" /></li>
</ul>
<input type="button" value="Submit" onclick="getValues()" />

<div id="output"></div>

JavaScript：

function getValues(){     
    var amount = 2; 
    var count = 1; 
    var text = ['<ul>'];

    for(var i=1; i <= amount; i++) {
        var ele = document.getElementById("feature_" + i);
        text[i] = "<li>" + ele.value + "</li>";
    }
    text.push('</ul>');

    document.getElementById('output').innerHTML = text.join('');
}

我修改了 while 循环以使用 for 循环，并为您的 text 变量切换到一个数组以增强优化。

你可以通过不将元素分配给变量来进一步压缩它，因为你只是得到它的值：

text[i] = "<li>" + document.getElementById("feature_" + i).value + "</li>";

演示： http://jsfiddle.net/ACVFq/

【讨论】：