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

Question

Anyways, I think that I have been staring at code too long to be able to think straight, so any help would be appreciated. Below is my code that seems unnecessarily repetitive.

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);

So, is there a way to use an object constructor to create these particular elements?

I've tried the code below and similar variations of it--one of which used properties in addition to values instead of just statements, as is the case below.

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("...");

However, I was getting an error to the effect of "Cannot add class to undefined".

Answer 1

The first tools in code re-use are functions and parameters. When only one or two things change in your code pile, pull them out as parameters and turn the repetitive bits in functions. This should get you started...

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));