问题描述
我正在尝试使用 Live Server 进行测试。在本地运行时一切正常；但是，当使用 Live Server 运行时，我的所有功能都在控制台中出错。
此外，所有代码都包含在我的 html 文档中，没有使用任何外部 JS 或 CSS 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>LKT v2</title>
</head>
<body></body>
<hr id="system-readmore" />
<div class="container p-3">
<input id="inputStd" class="input-element input_Style" type="text" placeholder="Enter License Key..." onkeyup="update();" />
<input id="inputOld" class="input-elementOld input_Style hidden" type="text" placeholder="Enter License Key..." onkeyup="alternate();" />
<input id="clearButton" class="clearBtn" type="submit" value="Clear" onclick="clearFnc();"/>
<h5 class="pt-3 pl-2">License Key Details:</h5>
<div>
<p id="outVersion" class="pl-2"> </p>
<p id="outModule" class="pl-2"> </p>
<p id="outRegion" class="pl-2"> </p>
<p id="outVolume" class="pl-2"> </p>
<p id="outSupport" class="pl-2"> </p>
</div>
</div>
</body>
<style type="text/css">
.hidden {
display: none !important;
}
input.input_Style,select {
width: 30%;
padding: 8px 15px;
margin: 8px 5px;
border: 2px solid #ccc;
border-radius: 4px;
transition: all 1s ease;
outline: none;
}
@media screen and (min-width: 600px) {
input[type=text]:focus.inputStyle {
width: 30%;
}
}
input[type=submit].clearBtn {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #1085de;
border: 2px solid #1085de;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: "Lato",sans-serif;
font-size: 13px;
padding: 10px;
width: 190px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 2px #000000;
transition: 0.5s;
font-weight: 600;
outline: none;
letter-spacing: 1px;
text-transform: uppercase;
}
input[type=submit]:hover.clearBtn {
background-color: #61bbff;
color: white;
border-radius: 6px;
border: 2px solid #61bbff;
transition: border-radius 150ms ease;
transition: 0.5s;
outline: none;
}
input[type=submit]:active.clearBtn {
position: relative;
top: 1px;
outline: none;
}
</style>
<script src="cleave.min.js"></script>
<script type="text/javascript">
var i = 0;
var key = [];
var fullKey;
// output variables
var ODMS = 'Version: Olympus Dictation Management System ';
var R7 = 'Release 7 (ODMS R7) - Download <a href="">here</a> ';
var R6 = 'Release 6 (ODMS R6) - Download <a href="">here</a> ';
var DSS = 'Version: DSS Player ';
var R4 = 'Pro Release 4 ';
var R5 = 'Pro Release 5 ';
var SR1 = 'Standard Release 1 - Download <a href="">here</a> ';
var SR2 = 'Standard Release 2 - Download <a href="">here</a> ';
var DSS6and7 = 'version 6 & 7 ';
var DPFM = 'Version: DSS Player For Mac - Download <a href="">here</a> ';
var R6SCP = 'ODMS R6 System Configuration Program (SCP) - Download <a href="">here</a> ';
var R6LM = 'ODMS R6 License Manager - Download <a href="">here</a> ';
var Express = ODMS + 'Express';
var sonority = 'Version: Sonority ';
var DSS2002 = 'Version: DSS Player 2002';
var version = '';
var module = '';
var region = '';
var usernum = '';
var key2002 = false;
var supported;
yesSup = '<span style="color: green;">This product is currently supported</span>';
noSup = '<span style="color: red;">This product is no longer supported</span>';
var errorMSG = '<span style="color: red;">One or more characters are invalid,please check your key & try again.</span>'
// Cleave for normal keys
var cleave = new Cleave('.input-element',{
delimiter: '-',blocks: [4,4,4],uppercase: true,});
// Cleave for old keys
var cleaveOld = new Cleave('.input-elementOld',3,});
// Clear all function for 'Clear' button
function clearFnc() {
document.getElementById('inputStd').value = '';
document.getElementById('inputOld').value = '';
document.getElementById('outVersion').innerHTML = '';
document.getElementById('outModule').innerHTML = '';
document.getElementById('outRegion').innerHTML = '';
document.getElementById('outVolume').innerHTML = '';
document.getElementById('outSupport').innerHTML = '';
region = '';
usernum = '';
key2002 = false;
inputHandle();
};
// Error message for invalid inputs
function keyError(){
version = errorMSG;
module = '';
region = '';
usernum = '';
supported = '';
}
// Main function
function update(){
console.log('update');
fullKey = document.getElementById('inputStd').value;
key = document.getElementById('inputStd').value.split('-');
switch(key[0].charat(0)){
// First character is 'R'
case 'R':
supported = '';
version = '<span style="color: #ff9933">Please enter additional characters</span>';
rKeyCheck();
keyModule();
R6serverComp();
break;
// First character is 'S'
case 'S':
supported = '';
version = DSS;
keyModule();
dssversion();
break;
// First character is '8'
case '8':
switch(key[0].charat(1)){
// DPFM
case '2':
supported = yesSup;
version = DPFM;
break;
// DSS Player v6 / v7
case '3':
v6v7module();
supported = noSup;
version = DSS + DSS6and7;
break;
// Sonority
case '5':
supported = noSup;
version = sonority;
break;
// Clear output if no value is entered
case '':
supported = '';
version = '';
break;
}
break;
// Blank input removes output & resets
case '':
version = '';
module = '';
region = '';
usernum = '';
supported = '';
key2002 = false;
inputHandle();
break;
// If an unrecognised character is entered will error.
default:
keyError();
break;
}
document.getElementById('outVersion').innerHTML = version;
document.getElementById('outModule').innerHTML = module;
document.getElementById('outRegion').innerHTML = region;
document.getElementById('outVolume').innerHTML = usernum;
document.getElementById('outSupport').innerHTML = supported;
}
// Function for 2002 keys
function alternate(){
fullKey = document.getElementById('inputOld').value;
key = document.getElementById('inputOld').value.split('-');
console.log('alt');
switch(key[0].charat(0)){
// First character is 'R'
case 'R':
version = '<span style="color: #ff9933">Please enter additional characters</span>';
module = '';
supported = '';
switch(key[0].charat(1)){
// Second character is 'D'
case 'D':
module = 'Module: Dictation Module'
supported = '';
switch(key[0].charat(2)){
case '3':
version = DSS2002;
supported = noSup;
break;
default:
key2002 = false;
inputHandle();
break;
}
break;
// Second character is 'F'
case 'F':
version = DSS2002;
supported = '';
switch(key[0].charat(2)){
case 'P':
module = 'Module: Transcription Module';
supported = noSup;
break;
default:
break;
}
break;
default:
key2002 = false;
inputHandle();
break;
}
break;
}
document.getElementById('outVersion').innerHTML = version;
document.getElementById('outModule').innerHTML = module;
document.getElementById('outSupport').innerHTML = supported;
}
// Check module of key (Standard keys)
function keyModule(){
switch(key[0].charat(1)){
// DM
case 'D':
module = 'Module: Dictation Module';
detect2002();
break;
//TM
case 'T':
module = 'Module: Transcription Module';
break;
case '':
module = '';
supported = '';
break;
default:
module = errorMSG;
break;
}
switch(key[0].charat(1)){
case 'F':
key2002 = true;
version = DSS2002;
inputHandle();
break;
}
}
// Check region of key
function keyRegion(){
switch(key[0].charat(3)){
case '4':
// USA
region = 'Region: United States of America';
break;
case '6':
// Europe
region = 'Region: Europe';
break;
case '8':
// Oceania
region = 'Region: Oceania';
break;
case '':
region = '';
break;
default:
region = errorMSG;
break;
}
}
// Check version for DSS software
function dssversion(){
if(key[0].length >=3){
switch(key[0].charat(2)){
case '1':
// SR1
version = DSS + SR1;
supported = noSup;
break;
case '2':
// SR2
version = DSS + SR2;
keyRegion();
keyvolume();
supported = yesSup;
break;
case '':
supported = '';
version = '';
break;
default:
version = errorMSG;
break;
}
}
}
// Checks for keys beginning with 'R'
function rKeyCheck(){
if (key[0].length >= 3){
switch(key[0].charat(2)){
// ODMS R7
case '7':
version = ODMS + R7;
keyRegion();
keyvolume();
supported = yesSup;
break;
// ODMS R6
case '6':
version = ODMS + R6;
keyRegion();
keyvolume();
supported = noSup;
break;
// R5
case '5':
version = DSS + R5;
keyvolume();
supported = noSup;
break;
// R4
case 'M':
version = DSS + R4;
supported = noSup;
break;
default:
keyError();
break;
}
}
}
// R6 server components
function R6serverComp(){
switch(key[0].charat(1)){
case 'S':
// R6 SCP
version = R6SCP;
supported = noSup;
break;
case 'L':
// R6 License Manager
version = R6LM;
supported = noSup;
break;
case 'R':
// ODMS Express
version = Express;
keyvolume();
supported = noSup;
break;
}
}
// Checks & outputs volume license amounts
function keyvolume(){
try{
switch(key[1]){
// Leaves blank until significant value is entered
case null: case '': case '0': case '00': case '000': case '0000':
usernum = '';
break;
// Single-user license key
case '0001':
usernum = 'You have 1 concurrent key on your license!';
break;
// Calculates the Volume of the key
default:
hexnum = key[1].toString(16);
keyAmount = parseInt((hexnum),16);
usernum = 'Your key has ' + keyAmount + ' concurrent licenses!';
break;
}
// Catch error - error resolves once key[1] has a valid input,hence the catch
} catch (err) {
console.log(err.message);
}
}
// Check module of v6/v7 keys
function v6v7module(){
if (key[1].length >= 4){
switch(key[1]){
case '0101':
module = 'Module: Dictation Module';
break;
case '0121':
module = 'Module: Transcription Module';
break;
default:
module = errorMSG;
break;
}
} else {
module = '';
}
document.getElementById('outModule').innerHTML = module;
}
// 2002 key detection
function detect2002(){
switch(key[0].charat(2)){
case '3':
key2002 = true;
inputHandle();
alternate();
break;
default:
key2002 = false;
break;
}
}
// Handles input field change
function inputHandle(){
switch(key2002){
// The key is for DSS Player 2002
case true:
document.getElementById('inputStd').classList.add('hidden');
document.getElementById('inputOld').classList.remove('hidden');
document.getElementById('inputOld').focus();
document.getElementById('inputOld').value = document.getElementById('inputStd').value;
document.getElementById('inputStd').value = '';
break;
// The key is not for DSS Player 2002
case false:
document.getElementById('inputStd').classList.remove('hidden');
document.getElementById('inputOld').classList.add('hidden');
document.getElementById('inputStd').focus();
document.getElementById('inputStd').value = document.getElementById('inputOld').value;
document.getElementById('inputOld').value = '';
break;
}
}
</script>
有谁知道是什么导致了这个错误或者我做错了什么？
解决方法
您的代码既不能在本地运行，也不能使用实时服务器，它不应该运行，因为未定义密钥。
您需要定义密钥。一开始定义key的时候就没有更多的错误了：
let key = ["0","0001"];
然后，我为案例“0001”添加了一条日志消息来测试它，现在一切正常。
// Single-user license key
case "0001":
console.log("Message successfully displayed!");
usernum = "You have 1 concurrent key on your license!";
break;
希望这有帮助！
,Live Server 发送 HTML 文件。为了使用任何 JavaScript / CSS 文件，我们需要通过 CSS 的 head 标签中的 link 属性或最后 JavaScript 的 body 标签（或在带有 'defer' 的 head 标签中）将它们连接到 HTML 文件>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>GoodBye</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>GoodBye World!!</h1>
<script src="app.js"></script>
</body>
</html>