Question

我想要一些关于如何“功能化”我的Javascript代码的指导，这样我就可以减少行数。现在，你可以从代码中看出，我只是复制，粘贴和更改关键字（在我的脚本中用作名称，ID和变量）。

在本节中，我想将最终的“3”更改为1到5之间的任何数字，因为我们需要在每家公司最多五位董事上收集这些财务数据。

如何在第一行“function calcNet3（）{”中设置pass-through（），以便var（s）和document.getElementById（“...”）中的最后一行“3” ）相应调整？我希望只创建一个“函数calcNet（）”，它可以根据需要对1,2,3,4或5进行排序。

这是我现在的功能。它有效...我想让它更灵活。我知道我需要调整HTML onchange以将“3”参数激发到函数括号中。

function calcNet3() {
    // at a .value so that we are getting the value out of the form boxes
var res1a3 = document.getElementById("residence1value3").value;
var res1b3 = document.getElementById("residence1debt3").value;
var res2a3 = document.getElementById("residence2value3").value;
var res2b3 = document.getElementById("residence2debt3").value;
var res3a3 = document.getElementById("residence3value3").value;
var res3b3 = document.getElementById("residence3debt3").value;
var inv1a3 = document.getElementById("invprop1value3").value;
var inv1b3 = document.getElementById("invprop1debt3").value;
var inv2a3 = document.getElementById("invprop2value3").value;
var inv2b3 = document.getElementById("invprop2debt3").value;
var inv3a3 = document.getElementById("invprop3value3").value;
var inv3b3 = document.getElementById("invprop3debt3").value;
var port13 = document.getElementById("shareport1value3").value;
var port23 = document.getElementById("shareport2value3").value;
var port33 = document.getElementById("shareport3value3").value;
var bank13 = document.getElementById("cash1value3").value;
var bank23 = document.getElementById("cash2value3").value;
var bank33 = document.getElementById("cash3value3").value;

// calculate net worth into a variable, put "+" in front of variable to make sure it is     a number
var nw3 = +res1a3 - +res1b3 + +res2a3 - +res2b3 + +res3a3 - +res3b3 + +inv1a3 - +inv1b3 + +inv2a3 - +inv2b3 + +inv3a3 - +inv3b3 + +port13 + +port23 + +port33 + +bank13 + +bank23 + +bank33;

// take the answer and feed it into the postFV function so that it gets added to the right span
postWorth3(nw3);

}

如果已经询问并回答了这个问题，请将我送到正确的地方。我做了搜索，但遗憾的是找不到合适的答案。

Answer 1

这可能需要在架构层面上做一些工作 - 你可能更适合使用像knockout.js这样的东西来设置一个动态视图模型，它可以动态地改变你的html ......这就是说 - 回答您关于如何修改函数以接受参数并使其更加动态和简单的直接问题：

只需使用一个对象来保存动态数量的属性......

function calcNet(numDirectors) {
    var formVals = {}, totalNet = 0;
    for (var i = 1; i <= numDirectors; i++) {
        formVals["res" + i + "a"] = document.getElementById('residence' + i + 'value').value;
        formVals["res" + i + "b"] = document.getElementById('residence' + i + 'debt').value;
        formVals["inv" + i + "a"] = document.getElementById("invprop" + i + "value").value;
        formVals["port" + i] = document.getElementById("shareport" + i + "value").value;
        formVals["bank" + i] = document.getElementById("cash" + i + "value").value;
        // you could use the '+' unary here like in your example, but I just like using Number() 
        formVals["net"+i] = Number(formVals["res" + i + "a"]) - Number(formVals["res" + i + "b"]) +
            Number(formVals["inv" + i + "a"]) + Number(formVals["bank" + i]);
        totalNet += formVals["net"+i];
    }
    // assuming you also modify postWorth to be a bit more dynamic!
    postWorth(totalNet);
}

Answer 2

var o={ item:null, item2:null};
var sum=0;


for (var i in o){
  var val=whatever(i);
  o[i]= val;
  sum+=val;
}

Answer 3

您可以更改calcNet（）以使用eval（），以便它可以根据提供的参数创建变量。它还将根据提供的参数使用正确版本的postWorth（）。

function calcNet(x) {
    eval("var res1a" + x + " = document.getElementById('residence1value" + x + "').value;");
    eval("var res1b" + x + " = document.getElementById('residence1debt" + x + "').value;");
    eval("var res2a" + x + " = document.getElementById('residence2value" + x + "').value;");
    eval("var res2b" + x + " = document.getElementById('residence2debt" + x + "').value;");
    eval("var res3a" + x + " = document.getElementById('residence3value" + x + "').value;");
    eval("var res3b" + x + " = document.getElementById('residence3debt" + x + "').value;");
    eval("var inv1a" + x + " = document.getElementById('invprop1value" + x + "').value;");
    eval("var inv1b" + x + " = document.getElementById('invprop1debt" + x + "').value;");
    eval("var inv2a" + x + " = document.getElementById('invprop2value" + x + "').value;");
    eval("var inv2b" + x + " = document.getElementById('invprop2debt" + x + "').value;");
    eval("var inv3a" + x + " = document.getElementById('invprop3value" + x + "').value;");
    eval("var inv3b" + x + " = document.getElementById('invprop3debt" + x + "').value;");
    eval("var port1" + x + " = document.getElementById('shareport1value" + x + "').value;");
    eval("var port2" + x + " = document.getElementById('shareport2value" + x + "').value;");
    eval("var port3" + x + " = document.getElementById('shareport3value" + x + "').value;");
    eval("var bank1" + x + " = document.getElementById('cash1value" + x + "').value;");
    eval("var bank2" + x + " = document.getElementById('cash2value" + x + "').value;");
    eval("var bank3" + x + " = document.getElementById('cash3value" + x + "').value;");

    eval("var nw" + x +  = '+res1a'+ x + '- +res1b'+ x + '+ +res2a'+ x + '- +res2b'+ x + '+ +res3a'+ x + '- +res3b'+ x + '+ +inv1a'+ x + '- +inv1b'+ x + '+ +inv2a'+ x + '- +inv2b'+ x + '+ +inv3a'+ x + '- +inv3b'+ x + '+ +port1'+ x + '+ +port2'+ x + '+ +port3'+ x + '+ +bank1'+ x + '+ +bank2'+ x + '+ +bank3' + x + ';');

    eval("postWorth" + x "(nw" + x + ");");
}

在javascript函数中插入变量

3 个答案: