如何将这些对象键值放入文本框中?

时间:2013-12-12 21:31:21

标签: javascript

我一直在尝试将对象字符串中每个键的值放入文本框但是有问题

如果有人可以帮我解决,并指出我正确的方向,我会在哪里错过ID感谢谢谢。

这是我正在使用的小版本。

<form name=formtest>

<input type=text id = text1 size=10 value=""/>
<input type=text id = text2 size=10 value=""/>
<input type=text id = text3 size=10 value=""/>
<input type=text id = text4 size=10 value=""/>
<input type=text id = text5 size=10 value=""/>
<input type=text id = text6 size=10 value=""/>
<input type=text id = text7 size=10 value=""/>
<input type=text id = text8 size=10 value=""/>
<input type=button id = calculate value = calculate onclick = calculate()/>

</form>

<script type="text/javascript">

function calculate() {  

var attackerTroops = {"Peasants":"222,111","Militia":"333,444","Spies":"22,1","Arsonists":"1111,1000"};

var peas =  'Peasants';
var mili =  'Miltia';
var spies =  'Spies';
var arson =  'Arsonists';

console.log(attackerTroops[peas]);
console.log(attackerTroops[mili]);
console.log(attackerTroops[spies]);
console.log(attackerTroops[arson);

document.formtest.text1.value =(peas[0])
document.formtest.text2.value =(peas[1])
document.formtest.text3.value =(mili[0])
document.formtest.text4.value =(mili[1])
document.formtest.text5.value =(spies[0])
document.formtest.text6.value =(spies[1])
document.formtest.text7.value =(arson[0])
document.formtest.text8.value =(arson[1])

}       
</script>

2 个答案:

答案 0 :(得分:0)

首先,我想提出一些改变。

  • 不要使用onclick属性绑定事件。而是绑定 JavaScript的。
  • 为每个对象文本框都有一个公共类,以便您可以 直接针对他们

所以你的HTML看起来像下面的东西

<form name=formtest>
    <input type=text class="textbox Peasants" size=10 value="" />
    <input type=text class="textbox Peasants"  size=10 value="" />
    <input type=text class="textbox Militia"  size=10 value="" />
    <input type=text class="textbox Militia" size=10 value="" />
    <input type=text class="textbox Spies"  size=10 value="" />
    <input type=text class="textbox Spies" size=10 value="" />
    <input type=text class="textbox Arsonists"  size=10 value="" />
    <input type=text class="textbox Arsonists" size=10 value="" />
    <input type=button id=calculate value=calculate />
</form>

<强> JS

var calculateButton = document.getElementById('calculate');

calculateButton.addEventListener('click', calculate);

function calculate() {
    var attackerTroops = {
        "Peasants": "222,111",
            "Militia": "333,444",
            "Spies": "22,1",
            "Arsonists": "1111,1000"
    };
    var keys = ['Peasants', 'Militia', 'Spies', 'Arsonists'];
    debugger;
    for (var i = 0; i < keys.length; i++) {
        // Gets the class name
        var className = keys[i];
        // Now access the elements based on the class name.
        var elems = document.getElementsByClassName(className);
        // Get the values based on the attackerTroops object
        // Split it using comma to get the array
        var vals = attackerTroops[className].split(',');
        // Iterate over each element based on the class name and set the value
        for (var j = 0; j < elems.length; j++) {
            elems[j].value = vals[j];
        }
    }
}

<强> Check Fiddle

答案 1 :(得分:0)

试试这个:

    try this:

<form name=formtest>

<input type=text id = text1 size=10 value=""/>
<input type=text id = text2 size=10 value=""/>
<input type=text id = text3 size=10 value=""/>
<input type=text id = text4 size=10 value=""/>
<input type=text id = text5 size=10 value=""/>
<input type=text id = text6 size=10 value=""/>
<input type=text id = text7 size=10 value=""/>
<input type=text id = text8 size=10 value=""/>
<input type=button id = calculate value = calculate onclick ="javascript:calculate1()"/>

</form>

<script type="text/javascript">
function calculate1() {  

var attackerTroops = {"Peasants":"222,111","Militia":"333,444","Spies":"22,1","Arsonists":"1111,1000"};

peas = attackerTroops.Peasants.split(',');
spies = attackerTroops.Spies.split(',');
mili = attackerTroops.Militia.split(',');
arson = attackerTroops.Arsonists.split(',');

document.formtest.text1.value =(peas[0])
document.formtest.text2.value =(peas[1])
document.formtest.text3.value =(mili[0])
document.formtest.text4.value =(mili[1])
document.formtest.text5.value =(spies[0])
document.formtest.text6.value =(spies[1])
document.formtest.text7.value =(arson[0])
document.formtest.text8.value =(arson[1])
}
</script>