有没有办法使用对象构造函数来创建多个具有唯一属性的 HTML 元素？

Question

无论如何，我认为我一直盯着代码太久无法思考，所以任何帮助都将不胜感激。下面是我的代码，似乎不必要地重复。

var P1actionContainer = document.createElement("div");
    P1actionContainer.setAttribute("id", "P1actionContainer");
    P1actionContainer.classList.add("actioncontainer");
    topbox.appendChild(P1actionContainer);

            // FOLD
        var P1fold = document.createElement("input");
            P1fold.setAttribute("id", "P1foldButton");
            P1fold.setAttribute("type", "button");
            P1fold.setAttribute("value", "FOLD");
            P1fold.classList.add("actionbuttonmargins");
            //fold.addEventListener("click", stepTenFold);
            P1actionContainer.appendChild(P1fold);

            // CALL
        var P1call = document.createElement("input");
            P1call.setAttribute("id", "P1callButton");
            P1call.setAttribute("type", "button");
            P1call.setAttribute("value", "CALL");
            P1call.classList.add("actionbuttonmargins");
            //call.addEventListener("click", stepTenCall);
            P1actionContainer.appendChild(P1call);

            // BET SLIDER
        var P1betSlider = document.createElement("input");
            P1betSlider.setAttribute("id", "P1betSlider");
            P1betSlider.setAttribute("type", "range");
            P1betSlider.setAttribute("value", "0");
            P1betSlider.setAttribute("min", blinds.L1B * 2);
            P1betSlider.setAttribute("max", P1.stack);
            P1betSlider.setAttribute("step", blinds.L1S);
            P1betSlider.classList.add("actionbuttonmargins");
            P1betSlider.addEventListener("input", P1adjustBetDisplay);
            P1actionContainer.appendChild(P1betSlider);

            // BET DISPLAY
        var P1betSliderValue = document.getElementById("P1betSlider").value;
        var P1betDisplay = document.createElement("input");
            P1betDisplay.setAttribute("id", "P1betDisplay");
            P1betDisplay.setAttribute("type", "number");
            P1betDisplay.setAttribute("value", P1betSliderValue);
            P1betDisplay.setAttribute("min", blinds.L1B * 2)
            P1betDisplay.setAttribute("max", P1.stack);
            P1betDisplay.setAttribute("step", blinds.L1S)
            P1betDisplay.setAttribute("maxlength", 4);
            P1betDisplay.classList.add("actionbuttonmargins");
            P1betDisplay.addEventListener("input", P1adjustBetSlider);
            P1actionContainer.appendChild(P1betDisplay);

            // BET
        var P1bet = document.createElement("input");
            P1bet.setAttribute("id", "betButton");
            P1bet.setAttribute("type", "button");
            P1bet.setAttribute("value", "RAISE");
            P1bet.classList.add("actionbuttonmargins");
            //bet.addEventListener("click", stepTenBet);
            P1actionContainer.appendChild(P1bet);

var P2actionContainer = document.createElement("div");
    P2actionContainer.setAttribute("id", "P2actionContainer");
    P2actionContainer.classList.add("actioncontainer");
    botbox.appendChild(P2actionContainer);

            // FOLD
        var P2fold = document.createElement("input");
            P2fold.setAttribute("id", "P2foldButton");
            P2fold.setAttribute("type", "button");
            P2fold.setAttribute("value", "FOLD");
            P2fold.classList.add("actionbuttonmargins");
            //fold.addEventListener("click", stepTenFold);
            P2actionContainer.appendChild(P2fold);

            // CALL
        var P2call = document.createElement("input");
            P2call.setAttribute("id", "P2callButton");
            P2call.setAttribute("type", "button");
            P2call.setAttribute("value", "CALL");
            P2call.classList.add("actionbuttonmargins");
            //call.addEventListener("click", stepTenCall);
            P2actionContainer.appendChild(P2call);

            // BET SLIDER
        var P2betSlider = document.createElement("input");
            P2betSlider.setAttribute("id", "P2betSlider");
            P2betSlider.setAttribute("type", "range");
            P2betSlider.setAttribute("value", "0");
            P2betSlider.setAttribute("min", blinds.L1B * 2);
            P2betSlider.setAttribute("max", P2.stack);
            P2betSlider.setAttribute("step", blinds.L1S);
            P2betSlider.classList.add("actionbuttonmargins");
            P2betSlider.addEventListener("input", P2adjustBetDisplay);
            P2actionContainer.appendChild(P2betSlider);

            // BET DISPLAY
        var P2betSliderValue = document.getElementById("P2betSlider").value;
        var P2betDisplay = document.createElement("input");
            P2betDisplay.setAttribute("id", "P2betDisplay");
            P2betDisplay.setAttribute("type", "number");
            P2betDisplay.setAttribute("value", P2betSliderValue);
            P2betDisplay.setAttribute("min", blinds.L1B * 2)
            P2betDisplay.setAttribute("max", P2.stack);
            P2betDisplay.setAttribute("step", blinds.L1S)
            P2betDisplay.setAttribute("maxlength", 4);
            P2betDisplay.classList.add("actionbuttonmargins");
            P2betDisplay.addEventListener("input", P2adjustBetSlider);
            P2actionContainer.appendChild(P2betDisplay);

            // BET
        var P2bet = document.createElement("input");
            P2bet.setAttribute("id", "betButton");
            P2bet.setAttribute("type", "button");
            P2bet.setAttribute("value", "RAISE");
            P2bet.classList.add("actionbuttonmargins");
            //bet.addEventListener("click", stepTenBet);
            P2actionContainer.appendChild(P2bet);

那么，有没有办法使用对象构造函数来创建这些特定元素？

我已经尝试过下面的代码及其类似的变体——其中一个除了值之外还使用了属性，而不仅仅是语句，如下例所示。

var createInput = function(elementName, a, v, aa, vv, aaa, vvv)
{
    elementName = document.createElement("input");
    elementName.setAttribute(a, v);
    elementName.setAttribute(aa, vv);
    elementName.setAttribute(aaa, vvv);
};

var P1fold = new createInput("P1fold", "id", "P1foldButton", "type", "button", "value", "FOLD");

    P1fold.classList.add("...");

但是，我收到了“无法将类添加到未定义”的错误。

Answer 1

代码重用的第一个工具是函数和参数。当您的代码堆中只有一两件事情发生变化时，将它们作为参数拉出来，并转换函数中的重复位。这应该让你开始......

function makeContainer(idPrefix, doc)
{
   var container = doc.createElement('div');
   container.setAttribute('id', idPrefix + 'container');
   container.classList.add("actioncontainer");
   //code to call functions to create buttons, etc.
   container.appendChild(makeButton(idPrefix, 'Call', doc));
   container.appendChild(makeButton(idPrefix, 'Bet', doc));
   //etc...
   return container; 
}

function makeButton(idPrefix, value, doc)
{

   var button = doc.createElement('input');
   button.setAttribute('id', idPrefix + value + 'button');
   button.setAttribute('type', 'button');
   button.setAttribute('value', value);
   button.classList.add("actionbuttonmargins");
   return button;
}
//Other functions for sliders, etc.

topbox.appendChild(makeContainer('p1', document));
topbox.appendChild(makeContainer('p2', document));