List all checked boxes from webpage This is part of a Tampermonkey script that generates a box in the top right of a webpage and generates a list of checked boxes from the specified list selector (list chosen through buttons). The script works as expected; however, I am not a web guy and do not pretend to be one. My main source of contention is how poorly designed the UI is. Any advice on improving the code and UI would be much appreciated.



var zNode       = document.createElement ('div');
zNode.innerHTML = '&lt;h3&gt;Create List of Items&lt;/h3&gt;&lt;h6&gt;&lt;b&gt;Not Selected&lt;span&gt;&lt;/span&gt;Selected&lt;/b&gt;&lt;/h6&gt;'  +
    '&lt;button id="hospNotSelectBtn" type="button"&gt;Hospitals&lt;/button&gt;&lt;span&gt;&lt;/span&gt;'                   +
    '&lt;button id="hospSelectBtn" type="button"&gt;Hospitals&lt;/button&gt;&lt;br&gt;'                               +
    '&lt;button id="deptNotSelectBtn" type="button"&gt;Departments&lt;/button&gt;&lt;span&gt;&lt;/span&gt;'                 +
    '&lt;button id="deptSelectBtn" type="button"&gt;Departments&lt;/button&gt;&lt;br&gt;'                             +
    '&lt;button id="jobNotSelectBtn" type="button"&gt;Job Titles&lt;/button&gt;&lt;span&gt;&lt;/span&gt;'                   +
    '&lt;button id="jobSelectBtn" type="button"&gt;Job Titles&lt;/button&gt;&lt;br&gt;'                               +
    '&lt;button id="jobFunctionNotSelectBtn" type="button"&gt;Job Functions&lt;/button&gt;&lt;span&gt;&lt;/span&gt;'        +
    '&lt;button id="jobFunctionSelectBtn" type="button"&gt;Job Functions&lt;/button&gt;'
;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);


GM_addStyle ( multilineStr ( function () {/*!
    #myContainer {
        position:               absolute;
        top:                    0;
        right:                  0;
        font-size:              20px;
        color:                  white;
        background:             green;
        border:                 3px outset black;
        margin:                 2px;
        padding:                2px 2px;
        text-align:             center;
    }
    #myContainer span {
        margin:                 0 10px;
    }
*/} ) );

//Function provided by Brock Adams of SE
function multilineStr (dummyFunc) {
    var str = dummyFunc.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
        .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
        .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
    ;
    return str;
}
In order to simplify the user interface I switched to using a drop down list. It has minimized the amount of visual interference the original script had on the webpage as well as streamlined the code.





var zNode       = document.createElement ('div');
zNode.innerHTML = `&lt;h5&gt;Selection Report&lt;/h5&gt;&lt;select name='selection' id='numbers'"&gt;
    &lt;option value="Choose" selected="selected"&gt;Choose Option&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsD_pnlListSelector input:checked"&gt;Departments Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsD_pnlListSelector input:not(:checked)"&gt;Departments Not Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lstSelectorPosition3_pnlListSelector input:checked"&gt;Hospitals Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lstSelectorPosition3_pnlListSelector input:not(:checked)"&gt;Hospitals Not Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsJT_pnlListSelector input:checked"&gt;Job Titles Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsJT_pnlListSelector input:not(:checked)"&gt;Job Titles Not Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsJF_pnlListSelector input:checked"&gt;Job Functions Selected&lt;/option&gt;
    &lt;option value="#ctl00_CPH_lsJF_pnlListSelector input:not(:checked)"&gt;Job Functions Not Selected&lt;/option&gt;
&lt;/select&gt;`;

zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        right:                  0;
        font-size:              20px;
        color:                  white;
        background:             green;
        border:                 3px outset black;
        margin:                 2px;
        padding:                2px 2px;
        text-align:             center;
    }
    #myContainer span {
        margin:                 0 10px;
    }
    #hospNotSelectBtn {
        cursor:                 pointer;
    }
    #hospSelectBtn {
        cursor:                 pointer;
    }
    #deptNotSelectBtn {
        cursor:                 pointer;
    }
    #deptSelectBtn {
        cursor:                 pointer;
    }
    #jobSelectBtn {
        cursor:                 pointer;
    }
    #jobNotSelectBtn {
        cursor:                 pointer;
    }
    #jobFunctionSelectBtn {
        cursor:                 pointer;
    }
    #jobFunctionNotSelectBtn {
        cursor:                 pointer;
    }
    #myAlertBox {
        font-size: small;
        background: white;
        border: 5px solid green;
        padding: 4px;
        position: absolute;
        top: 280px; right: 80px;
        max-width: 300px;
        white-space:pre-wrap;
    }`);