我遇到一些问题，让这个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不在我的代码中的任何位置。我完全糊涂了。
请帮忙!! ：）
答案 0 :(得分：0)
在测试代码之后，我只能得出结论，你的问题不是源于错误的JavaScript，而是写得很差。有些浏览器非常擅长拼凑坏的HTML，但其他浏览器可能不是。
我建议您清理并格式化HTML。确保所有标记都已正确关闭（在某些情况下，已打开）并且您不会嵌套过多的引号。
此外，您在问题结尾处提到的错误只是说明SList变量在定义之前已被引用。将JavaScript放在<body>标记的底部可能会解决此问题。