在我编写的程序中，用户可以将一个部件添加到队列中，最近的部件显示在一个单独的div中。我尝试做的是获取用于显示部件的输入值，并显示部件的更多细节，但使用switch语句根据用户输入的内容更改信息。
我以前看过使用switch和字符串的例子，但是如果值来自输入就没有了。任何帮助都将不胜感激。
这是我的代码。
let queue = [];
let compPart = [];
const partsInput = document.getElementById("parts");
const arrDisplay = document.getElementById("arr");
const completeDisplay = document.getElementById("compDisp");
const newestDisplay = document.getElementById("disp");
const logArea = document.getElementById("logList");
const partDetail = document.getElementById("details");
switch (partsInput) {
case 'Gear':
document.getElementById("details").innerHTML = 'Width: 5, Length: 2, Thickness: 1';
break;
case 'Screw':
document.getElementById("details").innerHTML = 'Width: 2, Length: 1, Thickness: 1';
break;
case 'Tube':
document.getElementById("details").innerHTML = 'Width: 3, Length: 8, Thickness: 2';
break;
case 'Socket':
document.getElementById("details").innerHTML = 'Width: 10, Length: 3, Thickness: 5';
break;
default:
document.getElementById("details").innerHTML = "Not a correct type of part";
}
function queuePart() {
queue.push(partsInput.value);
partsInput.value = ''; //Clear input when added
partsInput.focus();
if (queue.length > 4) {
queue.shift();
}
arrDisplay.innerHTML = queue;
newestDisplay.innerHTML = queue.at(-1);
logArea.innerHTML += "A part was added at this Date and Time" + "<br>" + Date() + "<br><br>";
}
function completePart() {
if (queue.length == 0) return; //Do nothing if queue is empty
compPart.push(queue.pop());
completeDisplay.innerHTML = compPart;
arrDisplay.innerHTML = queue;
if (queue.length > 0) {
newestDisplay.innerHTML = queue.at(-1);
} else {
newestDisplay.innerHTML = 'Currently No Parts In Queue';
}
logArea.innerHTML += "A part was completed at this Date and Time" + "<br>" + Date() + "<br><br>";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Machine Web UI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</div>
<div class="display" id="screen1">
<h1>Queue Area</h1>
<pre id="arr">Currently No Parts In Queue</pre>
<input type ="text" id ="parts"></input>
<button type="button" onclick="queuePart()"> Add a Part </button>
</div>
<div class="container" id="screen2">
<h1>Part Display Area</h1>
<pre id="disp"></pre> <br>
<pre id="details"></pre>
<button type="button" id="btn" onclick="completePart()"> Complete Part </button>
</div>
<div class="display" id="screen3">
<h1>Completed Parts Area</h1>
<pre id="compDisp">Currently no parts completed</pre>
</div>
<div class="display" id="screen4">
<h1>Log Area</h1>
<pre id="logList"> </pre>
</div>
<script>
</script>
</body>
</html>再次谢谢你。
1条答案
按热度按时间mpgws1up1#
const partsInput = document.getElementById("parts"); switch (partsInput) { case 'Gear':partsInput现在包含了一个html元素。在switch语句中，您要将它与字符串进行比较。您要做的是比较html元素的值，因为它包含了您要查找的字符串：
switch (partsInput.value)文件：https://www.w3schools.com/tags/att_value.asp