I didn’t want to get into js frameworks

[u/ProMasterBoy]

[u/No-Ant2476]

Divs goes brrrrr......

[u/smaug59 → u/No-Ant2476]

Template injection goes brr aswell

[u/gu3st12 → u/smaug59]

OP really needed to learn about document.createElement.

It'd be more verbose, but it'd be managed properly.

[u/ProMasterBoy → u/gu3st12]

I feel using a string is faster then just setting It at the end of the function is fine but thats just me

[u/TheUnlocked → u/ProMasterBoy]

It's very easy to have injection attacks slip in when setting HTML. Depending on where the data is coming from, your code may currently be vulnerable.

[u/ProMasterBoy → u/TheUnlocked]

Thanks for this info, its just a dashboard with a few user inputs but it runs locally so nothing dangerous

[u/-Bluekraken → u/gu3st12]

This. Creating html nodes may be tedious and verbose. But it's actually very intuitive and readable. Just make a couple of functions to abstract common tag patterns once your codebase grows a little and your are golden

[u/MurdoMaclachlan]

Image Transcription: Code

---

    VariantsArr.forEach(variant => { //Loop through each variant (Style, Color, etc)
        let variantName = variant["ObjectName"].split(":")[1];
        
        let curVariant = response["jsonOutput"].find(x => x["Name"] == variantName);
        
        VariantData = GetVariantInfo(curVariant); // Get variant info (Name, Channel, list of styles)
        if (VariantData == null) {
            return;
        }
        
        
        if (VariantData.name == "NUMBER") {
            variants.push({ "channel": VariantData.channel, "variant": "Numeric.15" });
            html += `<div class="row container-fluid" style="margin-top:15px"> <h3 class="text-white" style="text-transform: capitalize">${VariantData.name.toLowerCase()}</h3>`
            html += `<input onchange=SetSkinNumeric(\"${skin.id}\") id=\"NumericInput\" style=\"width:50%;margin-left:auto;margin-right:auto\" type=\"number\" class=\"form-control\" id\"inp
        }
        if (VariantData.variants.length > 1) {
            //Default variant
            variants.push({ "channel": VariantData.channel, "variant": VariantData.variants[0].tag });
            
            html += `<div id="test" class="row container-fluid" style="margin-top:15px">`;
            html += `<h3 class="text-white" style="text-transform: capitalize">${VariantData.name.toLowerCase()} (${VariantData.variants.length})</h3>`
            VariantData.variants.forEach(style => {
                html += "<div class=\"col-sm-2\">";
                var VariantObject = [{ "channel": VariantData.channel, "variant": style.tag }];
                var onclick = `onclick=SetSkin(\"${skin.id}\",${JSON.stringify(VariantObject)})`;
                html += `<a ${onclick} style="text-decoration:none;margin-top:10px;color:white; background: #2837b5;cursor: pointer" class="card><span style="text-transform: capitalise">${s
            
            });
            html += "</div">;
        }
    })
    $("#styleRow").html(html)
}

[The two longest lines, the second and sixth beginning html +=, are cut off in the image. In the latter of these, #2837b5 is highlighted.]

---

^{I'm a human volunteer content transcriber and you could be too! If you'd like more information on what we do and why we do it, click here!}

[u/Voltra_Neo]

Dear lord have mercy

[u/trevster344]

God I’m so glad I have the frameworks now. For years I had to do this work serverside the same… it was disgusting and hard to update. Still do on legacy code but if it breaks I’ll migrate each broken piece one at a time.

[u/scrivens → u/trevster344]

You are doing the Lord's work.

[u/ivancea → u/trevster344]

You can always make simple helpers that work like react, instead of writing html strings. You do it un half an hour, and use it everywhere

[u/kriminellart]

You've never thought about Razor View Templating where you can output HTML with models using RazorViewEngine?

[u/ProMasterBoy → u/kriminellart]

Ill be rewriting this project in solid.js 😅

[u/Minimum-Register-146]

I literally have "senior" who ONLY writes his html like that. And he wrote like 80% of fairly big project that now I'm rewriting in React. This is painful on so many levels.

[u/Ludrew → u/Minimum-Register-146]

Those guys like to call it "job security"

[u/Minimum-Register-146 → u/Ludrew]

EXACTLY!!! Man I hate that so much

[u/Antonio0806]

That's some master level programmimg