Javascript - 可变缺失

时间:2015-12-23 01:03:51

标签: javascript html css

我遇到一些问题,让这个javascript和css在大约50%的机器上正常工作。奇怪的是,他们所有工作的计算机都有最新的浏览器,我尝试过多个浏览器。我可以验证此代码是否正常运行,但无法验证它为何无法在大量计算机上运行。这是我用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>

HTML(我的功能尚未构建。如果这可能是一个问题,请告诉我):

    <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>

这是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>

我发现的事情可能会发生三件事。

1)现在的页面将完美运行。 2)页面会有一些CSS问题,但javascript仍然有效。 3)页面根本不起作用。

当页面根本无法运行时,Chrome中的控制台会显示错误Error: Uncaught ReferenceError: SList is not definedListPicker._handleMouseUp @ about:blank:510

如您所见,ListPicker不在我的代码中的任何位置。我完全糊涂了。

请帮忙!! :)

1 个答案:

答案 0 :(得分:0)

在测试代码之后,我只能得出结论,你的问题不是源于错误的JavaScript,而是写得很差。有些浏览器非常擅长拼凑坏的HTML,但其他浏览器可能不是。

我建议您清理并格式化HTML。确保所有标记都已正确关闭(在某些情况下,已打开)并且您不会嵌套过多的引号。

此外,您在问题结尾处提到的错误只是说明SList变量在定义之前已被引用。将JavaScript放在<body>标记的底部可能会解决此问题。