Javascript - Variable Missing

- 1 answer

Ad

I am having some issues getting this javascript and css to work correctly on about 50% of machines. The odd things is, they're all work computers that have browsers up-to-date and I have tried multiple browsers. I can verify that this code works correctly, but can't verify why it's not working on a large amount of machines. Here is my beginning code with js:

<!DOCTYPE html>
<head>
<style type='text/css'>
.body-content {
    background: rgba(255, 202, 25);
    color: red;
    position: relative;
    left: 20em;
    top: -6.2em;
    background-color: rgb(255, 202, 25);
    padding: 10px 100px;
    font-weight: 700;
    line-height: 2em;
    max-width: 45em;
    border: 3px solid yellow;
    border-radius: 7px;
}

.comp-form {
    color: rgb(24, 33, 128);
    transform: rotate(90deg);
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-size: 70px;
    transform-origin: 5%;
    font-style: normal;
    font-variant: small-caps;
    text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
    font-weight: 700;
    line-height: 2em;
    position: absolute;
    border: 3px solid black;
    background: rgb(255, 202, 25);
    padding: 0 600px;
    z-index: 1;
    left: -20px;
    top: -400px;
}

.country-select {
    position: absolute;
    top: 58px;
    left: 325px;
    color: yellow;
}

body {
  background-color: rgb(24, 33, 128);
  position: relative;
  top: 6.5em;
  font-color: white;
}

.submitbutton {
    -moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
    -webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
    box-shadow:inset 50px 50px 50px 0px yellow;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
    background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
    background-color:#ffc919;
    -webkit-border-top-left-radius:37px;
    -moz-border-radius-topleft:37px;
    border-top-left-radius:37px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:37px;
    -moz-border-radius-bottomright:37px;
    border-bottom-right-radius:37px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0px;
    border:9px solid #182180;
    display:inline-block;
    color:#182180;
    font-family:Comic Sans MS;
    font-size:33px;
    font-weight:bold;
    font-style:normal;
    height:63px;
    line-height:40px;
    width:147px;
    text-decoration:none;
    text-align:center;
    position: relative;
    left: -120px;
    bottom: 25px;
    text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
    border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}

.submitbutton:active {
    position: relative;
    top:-20px;
    color: yellow;
    border-color: yellow;
    box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}

.cancelbutton {
    -moz-box-shadow:inset 50px 50px 50px 0px #ffc919;
    -webkit-box-shadow:inset 50px 50px 50px 0px #ffc919;
    box-shadow:inset 50px 50px 50px 0px yellow;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc919), color-stop(1, #ffc919) );
    background:-moz-linear-gradient( center top, #ffc919 5%, #ffc919 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc919', endColorstr='#ffc919');
    background-color:#ffc919;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:37px;
    -moz-border-radius-topright:37px;
    border-top-right-radius:37px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:37px;
    -moz-border-radius-bottomleft:37px;
    border-bottom-left-radius:37px;
    text-indent:0px;
    border:9px solid #182180;
    display:inline-block;
    color:#182180;
    font-family:Comic Sans MS;
    font-size:33px;
    font-weight:bold;
    font-style:normal;
    height:63px;
    line-height:40px;
    width:147px;
    text-decoration:none;
    text-align:center;
    position: relative;
    left: -120px;
    bottom: 25px;
    text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
    border-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
}

.cancelbutton:active {
    position: relative;
    top:-20px;
    color: yellow;
    border-color: yellow;
    box-shadow:inset 50px 50px 50px 0px rgb(24, 33, 128);
}

.ccTitle {
    color: rgb(24, 33, 128);
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-size: 70px;
    font-style: normal;
    font-variant: small-caps;
    text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
    font-weight: 700;
    line-height: 2em;
    position: relative;
    left: 250px;
    border: 3px solid black;
    background: rgb(255, 202, 25);
    width: 80%;
    top: -170px;
    padding: 0 100px;
    z-index: 2;
    white-space: nowrap;
}

.dropbox1 {
    position: absolute;
    top: 4.45em;
    left: 34.5em;
}

.dropbox2 {
    position: absolute;
    top: 3.75em;
    left: 36em;
    color: yellow;
}

.expimg {
    width: 300px;
    height: 300px;
    float: left;
    position: absolute;
    left: -15px;
    top: -170px;
    border: 3px solid black;
    z-index: 3;
}

.tableheader {
    color: rgb(24, 33, 128);
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-variant: small-caps;
    text-shadow: yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px, yellow 0px 0px 10px;
    font-weight: 700;
    padding-bottom: 10px;
}

#reqTbl {
    position: relative;
    top: 20px;
    left: -28px;
    padding: 30px;
    border: 3px solid yellow;
    border-radius: 7px;
    width: 760px
}

#supplierTbl {
    position: relative;
    top: 50px;
    left: -30px;
    padding: 30px;
    border: 3px solid yellow;
    border-radius: 7px;
}

#currencyTbl {
    position: relative;
    top: -170px;
    left: 357px;
    border: 3px solid yellow;
    padding: 30px 30px;
    border-radius: 7px;
    width: 375px;
}

tr {
    color: rgb(24, 33, 128);
    font-size: 14px;
    text-align: center;
}

#commentsheader {
    position: relative;
    top: -100px;
    left: -33px;
    padding: 30px;
    border: 3px solid yellow;
    border-radius: 7px;
    width: 460px;
}

#commentBox {
    position: relative;
    top: -127px;
    left: -33px;
    padding: 30px;
    border: 3px solid yellow;
    border-radius: 7px;
    height: 200px;
    width: 700px;
}

#MPIFid {
    position: relative;
    bottom: 0px;
    right: 290px;
    overflow: auto;
}
</style>
</head>

And the HTML (I have functions that are not built yet in this. Please let me know if this could be an issue):

    <body>
<h1 class="ccTitle">CURRENCY CONVERSIONS</h1>
<h2 class="comp-form">Header2</h2>
<img src="http:/photo.png" alt="Logo" class="expimg">
<div class="country-select">Select Bank Country:</div>
        <select name="slist1" class="dropbox1" onchange="SList.getSelect('slist2', this.value);">
            <option>- - -</option>
            <option value="United_States">United States</option>
            <option value="Italy">Italy</option>
            <option value="Greece">Greece</option>
        </select>
<span id="slist2" class="dropbox2"></span>
<div id="test" style="display:none;" class="body-content">
    <form id='curForm'>
        <table id='reqTbl'>
            <tr>
                <th class='tableheader' align='center' colspan=3>Prerequisites</th>
            </tr>
            <tr>
                <td>
                    Has the partner already been placed on stop sell?
                </td>
                <td>
                    <label for="Yes"><input type="radio" name='Stop Sell' value="Yes" id='ssYes' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">Yes</label>
                    <label for="No"><input type="radio" name='Stop Sell' value="No" id='ssNo' onmouseover="tooltip.show('The supplier must be placed on Stop Sell prior to the request being submitted/processed.', 200);" onmouseout="tooltip.hide();">No</label>
                </td>
            </tr>  
            <tr>
                <td>
                    Has the Market Manager given approval for this conversion?
                </td>
                <td>
                    <label for="Yes"><input type="radio" name='Market Manager Approval' value="Yes" id='mmApproved' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();'>Yes</label>
                    <label for="No"><input type="radio" name='Market Manager Approval' value="No" id='mmDenied' onmouseover="tooltip.show('Approval from the Market Manager associated with the supplier is required before any requests can be submitted/processed.', 200);" onmouseout='tooltip.hide();\'>No</label>
                </td>
            </tr>
            <tr>
                <td>
                    Market Manager that supplied approval
                </td>
                <td>
                    <input type="text" name="Market Manager Name" id='mmName' onmouseover="tooltip.show('Name of Market Manager who has approved the request',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
                </td>
            </tr>
            <tr>
                <td>
                    Effective Date of Currency Change
                </td>
                <td>
                    <input type="text" size="10" name="Effective Date of Currency Change" id="dateBox" onblur="this.value=asteriskize(this);" onmouseover="tooltip.show('Please click to select the date from which this change should be effective.', 200);" onmouseout="tooltip.hide();"
                </td>
            </tr>
        </table>
        <table id="supplierTbl">
            <tr>
                <th class='tableheader' align='center' colspan=3>Partner Info</th>
            </tr>
            <tr>
                <td>
                    Vendor ID
                </td>
                <td>
                    ID
                </td>
            </tr>
            <tr>
                <td>
                    <input type='text' name='AccountingVendorID' id='accountingVendorID' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Vendor ID of supplier.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
                </td>
                <td>
                    <input type='text' name='SampleID1' id='SampeID2' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Also referred to as the EID.', 200);" onmouseout="tooltip.hide();" onkeypress="return valNum(event);">
                </td>
            </tr>
            <tr>
                <td>
                    Partner Name
                </td>
                <td>
                    Country
                </td>
            </tr>
            <tr>
                <td>
                    <input type='text' name='Supplier Name' id='supplierName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('Name of the supplier.', 200);" onmouseout="tooltip.hide();">
                </td>
                <td>
                    <input type='text' name='City Name' id='cityName' onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);' onmouseover="tooltip.show('City in which the supplier is located.', 200);" onmouseout="tooltip.hide();">
                </td>
            </tr>
        </table>
        <table id='currencyTbl'>
            <tr>
                <th class='tableheader' align='center' colspan=3>Currency</th>
            </tr>
            <tr>
                <td>
                    Current Currency:
                </td>
                <td>
                    <input type="text" name="Current PeopleSoft Currency" id='currentCurr' onmouseover="tooltip.show('Current Currency',200);" onmouseout="tooltip.hide();" onfocus='this.value=fieldFocus(this);' onblur='this.value=asteriskize(this);'>
                </td>
            </tr>
            <tr>
                <td>
                    Desired Currency:
                </td>
                <td>
                    <select name='Desired Currency' id='desiredCurr' onmouseover="tooltip.show('New Currency', 200);" onmouseout="tooltip.hide();">
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <th  class='tableheader' id='commentsheader'>Comments</th>
            </tr>
            <tr>
                <td  style='height:308px;width:500px;'>
                    <textarea id='commentBox'></textarea>
                </td>
            </tr>
        </table>
        <table id="MPIFid">
            <tr>
                <td>
                    <div id="scontent" class="body-content"></div>
                <td>
            </tr>
        </table>
        <table>
            <tr>
                <td width='920px'>
                    <button type='button' id='submitButtonid' class='submitbutton' onclick='sendItOff();'>Submit</button>
                </td>
                <td>
                    <button type='button' id='cancelButtonid' class='cancelbutton' onclick='confirmCancel();'>Cancel</button>
                </td>
            </tr>
        </table>
    </form>
</div>

Here's the Javascript:

<script language='javascript'> 

    var SList = new Object(); // JS object declaration that stores data for options
    var txtsl2 = 'Select Payment Method (If EFT, select MPIF Country/Language combination): ';

    /*
    Information that populates in dropbox 2 from the dropbox 1.
    Could be potential spot for Basecamp function call once created.
    */

    SList.slist2 = {
      "United_States": ['Card', 'EFT - US/English'],
      "Italy": ['Card', 'EFT - IT/English','EFT - IT/Italian'],
      "Greece": ['Card', 'EFT - GR/English', 'EFT - GR/Greek']
    };

    /*
     Object that stores content after 2nd dropbox selection.
    */

    SList.scontent = {
      "EFT - US/English": '**Please have the partner submit a form through the following link**: LINK',
      "EFT - IT/Italian": '**Please have the partner submit an MPIF form through the following link**: LINK',
      "EFT - IT/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
      "EFT - GR/English": '**Please have the partner submit an MPIF form through the following link**: LINK',
      "EFT - GR/Greek": '**Please have the partner submit an MPIF form through the following link**: LINK',
    };

/* DO NOT TOUCH BELOW */

// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
    if (SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if (slist === 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if (slist === 'slist2') {
            var addata = '<option>- - -</option>';
            for (var i = 0; i < SList[slist][option].length; i++) {
                addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
            }
        document.getElementById('slist2').innerHTML = txtsl2 + '<select name="slist2" onchange="SList.getSelect(\'scontent\', this.value); check_dd();">' + addata + '></select>';
        }
    } else if (slist === 'slist2') {
        // empty the tag for 2n
        document.getElementById('slist2').innerHTML = '';
    }
};

// drops the form data down after 2nd selection
function check_dd() {
    if(document.getElementById('slist2').value === "- - -") {
        document.getElementById('test').style.display = 'none';
    } else {
        document.getElementById('test').style.display = 'block';
    };
};
</script>
</html>

There are 3 things that could potentially happen with what I've found.

1) The page as it is right now will work flawlessly. 2) The page will have some CSS issues, but the javascript will still work. 3) The page will not function at all.

When the page will not function at all, the console in Chrome shows the error Error: Uncaught ReferenceError: SList is not definedListPicker._handleMouseUp @ about:blank:510

As you can see, ListPicker is NOT anywhere in my code. I'm thoroughly confused.

Please help!! :)

Ad

Answer

Ad

After testing your code, I can only conclude that your problems do not stem from erroneous JavaScript, but rather poorly written markup. Some browsers are pretty good at piecing together bad HTML, but others may not be.

I would recommend you clean up and format your HTML. Make sure all of your tags are properly closed (and in some cases, opened) and that you don't nest too many quotes.

Also, the error you mention at the end of your question simply states that the SList variable was referenced before it had been defined. Putting your JavaScript at the bottom of your <body> tag might fix this.

Ad
source: stackoverflow.com
Ad