JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<form id="pizzaform" action="#">
        <p>
            <input type="button" id="veggiespecial" name="veggiespecial" value="Veggie Special" />
            <input type="button" id="meatspecial" name="meatspecial" value="Meat Special" />
            <input type="button" id="hawaiian" name="hawaiian" value="Hawaiian" />
        </p>
        <table>
            <tr>
                <td>Toppings</td>
                <td>Crust</td>
                <td>Size</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="sausage" value="Sausage" name="toppingcheck" />Sausage</td>
                <td>
                    <input type="radio" name="crust" value="Regular" checked="checked" id="radio1" />Regular</td>
                <td>
                    <input type="radio" name="size" value="Small" checked="checked" id="radiosize1" />Small</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="pepperoni" value="Pepperoni" name="toppingcheck" />Pepperoni</td>
                <td>
                    <input type="radio" name="crust" value="Deep Dish" id="radio2" />Deep Dish</td>
                <td>
                    <input type="radio" name="size" value="Medium" id="radiosize2" />Medium</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="ham" value="Ham" name="toppingcheck" />Ham</td>
                <td>
                    <input type="radio" name="crust" value="Thin" id="radio3" />Thin</td>
                <td>
                    <input type="radio" name="size" value="Large" id="radiosize3" />Large</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" id="peppers" value="Green Peppers" name="toppingcheck" />Green Peppers</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <input...

JavaScript

function prepza() {
            var checkboxes = document.forms["pizzaform"].toppingcheck.length;
            var crusttype = document.forms["pizzaform"].crust;
            var size = document.forms["pizzaform"].size;
            var crustlength = crusttype.length;
            var sizelength = crusttype.length;
            var newelement = document.createElement("p");
            newelement.setAttribute("id", "orderheading");
            document.body.appendChild(newelement);
            newelement.appendChild(document.createTextNode("This pizza will have:"));
            for(var c = 0; c < crustlength; c++) {
                if(crusttype[c].checked) {
                    var newelement = document.createElement("p");
                    newelement.setAttribute("id", "crustelement" + c);
                    document.body.appendChild(newelement);
                    newelement.appendChild(document.createTextNode(crusttype[c].value + " Crust"));
                }
            }
            for(var s = 0; s < sizelength; s++) {
                if(size[s].checked) {
                    var newelement = document.createElement("p");
                    newelement.setAttribute("id", "sizeelement" + s);
                    document.body.appendChild(newelement);
                    newelement.appendChild(document.createTextNode(size[s].value + "Size"));
                }
            }
            for(var i = 0; i < checkboxes; i++) {
                if(document.forms["pizzaform"].toppingcheck[i].checked) {
                    var newelement = document.createElement("p");
                    newelement.setAttribute("id", "newelement" + i);
                    document.body.appendChild(newelement);
                    newelement.appendChild(document.createTextNode(document.forms["pizzaform"].toppingcheck[i].value));
                }
            }
        }

        function clearchk() {
            var f = document.forms[0];
            for(i = 0; i < f.elements.length; i++)...