我需要帮助简化一些Javascript

Question

我有一些非常复杂的javascript用于根据用户放入文本字​​段的数字创建许多输入字段和下拉框。
基本描述：它表明你是否使用了数字或不，然后计算出数字是否小于5，然后计算出它是多少。然后我根据它的数字复制并粘贴文本字段和操作。显然，我吮吸Javascript（和正确的语法。）
这是代码：

function calculator() {
var boxNumber= document.getElementById('boxNumber').value;
var boxInt= parseInt(boxNumber);
var limit= new Number(5);

if (Math.floor(boxInt)== boxInt) {

    if (boxInt <= limit) {

        x= boxInt;

        if (x==5){

            document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"

        }

        else {

            if (x==4) {

                document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"

            }

            else {

                if (x==3) {

                document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"

            }

                else {

                    if (x==2) {

                        document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select><br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"

                    }

                    else {

                    if (x==1) {

                        document.getElementById('opSpace').innerHTML="<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>"

                    }

                    else {

                        alert("No zeros or negatives please")

                    }

                    }

                }

            }

        }

    }

    else {
    alert ("Use a number less than 5")
    }
}

else {
    alert("Use a number")
}
}

你明白了。这是计算器的前身，其中文本字段将定义操作数字，下拉列表将定义操作。非常感谢任何帮助。

Answer 1

function calculator() {
    var boxNumber= document.getElementById('boxNumber').value;
    var boxInt= parseInt(boxNumber, 10);
    var limit= 5;

    if (Math.floor(boxInt)== boxInt) {
        if (boxInt <= limit && boxInt > 0) {
            var html = '';
            for (var i = 0; i < boxInt; i++) {
                html += "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>";
            }
            document.getElementById('opSpace').innerHTML = html;
        } else {
            alert("No zeros or negatives please")
        }
    } else {
        alert ("Use a number less than 5")
    }
}

Answer 2

像

这样的东西

if(x>limit)
{
     ... show error...
}
else if(x<= 0)
{
     ... show error...
}
else
{
    var el = document.getElementById('opSpace');
    el.innerHTML = '';
    for(var i = 0; i<x; i++)
    {
        el.innerHTML += "<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>";
    }
}

Answer 3

function calculator() {
    var boxNumber = document.getElementById('boxNumber').value;
    var boxInt = Math.floor( parseInt(boxNumber, 10) );
    var limit = 5;
    var htmlString = '<br /><input /><p></p><select><option>Add</option><option>Sub</option><option>Mul</option><option>Div</option></select>';

    function repeatString(str, num) {
        return new Array(num + 1).join(str);
    }

    if ( !isNaN(boxInt) && boxInt <= limit && boxInt > 0 ) {
        document.getElementById('opSpace').innerHTML = repeatString( htmlString, boxInt );
    } else if (boxInt < 0) {
        alert('Use a number between 0-' + limit);
    }
}