"use strict";

/*===
    function: updateSummary: expect nothing, return nothing,
        but has the side-effects of setting an element whose
        id="topping-summary" (assumed to be a p element or one
        it is OK to set innerHTML for) to contain a summary
        of currently-checked elements that have class="toppingChoice"

    by: Sharon Tuttle
    last updated: 2024-04-30
===*/

function updateSummary()
{
    // grab references to ALL DOM objects with class="toppingChoice"
    //     (assumed to be checkboxes)

    let myToppingCkboxes =
        document.getElementsByClassName("toppingChoice");

    // grab a reference to the p element with id="topping-summary"

    let summaryPara = document.getElementById("topping-summary");
    summaryPara.innerHTML = "Summary of toppings:";

    // for each checked checkbox amongst those grabbed,
    //     append its name to the grabbed paragraph's content

    for (let i=0; i < myToppingCkboxes.length; i++)
    {
        // happily, you can tell if a checkbox is currently checked
        //     by checking the value of its DOM object's checked data field
        //     (that will be true if it is currently checked)

        if (myToppingCkboxes[i].checked == true)
        {
            summaryPara.innerHTML = summaryPara.innerHTML +
                                       " " + myToppingCkboxes[i].name;
        }
    }
}

/*===
    now set the onclick attribute of checkboxes with class="toppingChoice"
        to have function updateSummary as its value, so it will be called
        each time a click action is done on that checkbox
===*/

window.onload =
    function()
    {
        // grab the checkboxes with class="toppingChoice"

        let myToppingCkboxes =
            document.getElementsByClassName("toppingChoice");

        // set an onclick attribute to function updateSummary for
        //    each of these checkboxes

        for (let i=0; i < myToppingCkboxes.length; i++)
        {
            myToppingCkboxes[i].onclick = updateSummary;
        }
    };