如何基于输入框值用switch语句展示不同零件详情？

问题分析 #

你当前的代码存在两个核心问题：

• 现有的switch语句在页面初始化阶段就执行了，此时输入框无用户输入，且判断的是DOM元素对象而非输入框的value值，无法实现根据用户输入展示对应参数的需求。
• 没有在添加零件或完成零件的关键节点触发零件详情的更新逻辑。

解决方案 #

将零件参数的判断逻辑封装为独立函数，在添加零件、完成零件后根据当前队列的最新零件调用该函数，同时处理输入值的大小写兼容（避免用户输入小写无法匹配的情况）。

修改后的完整代码 #

JavaScript 代码

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");

// 封装零件详情更新函数
function updatePartDetails(partType) {
  // 统一转为大写，兼容大小写输入
  const type = partType.trim().toUpperCase();
  switch (type) {
    case 'GEAR':
      partDetail.innerHTML = 'Width: 5, Length: 2, Thickness: 1';
      break;
    case 'SCREW':
      partDetail.innerHTML = 'Width: 2, Length: 1, Thickness: 1';
      break;
    case 'TUBE':
      partDetail.innerHTML = 'Width: 3, Length: 8, Thickness: 2';
      break;
    case 'SOCKET':
      partDetail.innerHTML = 'Width: 10, Length: 3, Thickness: 5';
      break;
    default:
      partDetail.innerHTML = "Not a correct type of part";
  }
}

function queuePart() {
  const inputValue = partsInput.value.trim();
  if (!inputValue) return; // 空输入不处理

  queue.push(inputValue);
  partsInput.value = '';
  partsInput.focus(); 
  
  if (queue.length > 4) {
    queue.shift();
  }
  
  arrDisplay.innerHTML = queue;
  const latestPart = queue.at(-1);
  newestDisplay.innerHTML = latestPart;
  // 更新最新零件的详情
  updatePartDetails(latestPart);
  
  logArea.innerHTML += "A part was added at this Date and Time<br>" + Date() + "<br><br>";
}

function completePart() {
  if (queue.length == 0) return;
  
  compPart.push(queue.pop());
  completeDisplay.innerHTML = compPart;
  arrDisplay.innerHTML = queue;

  if (queue.length > 0) {
    const latestPart = queue.at(-1);
    newestDisplay.innerHTML = latestPart;
    // 更新最新零件的详情
    updatePartDetails(latestPart);
  } else {
    newestDisplay.innerHTML = 'Currently No Parts In Queue';
    partDetail.innerHTML = ''; // 队列为空时清空详情
  }
  
  logArea.innerHTML += "A part was completed at this Date and Time<br>" + Date() + "<br><br>";
}

HTML 代码

<!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 class="display" id="screen1">
      <h1>Queue Area</h1>
      <pre id="arr">Currently No Parts In Queue</pre>
      <input type ="text" id ="parts">
      <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>
      // 这里放入上面的JavaScript代码
    </script>
</body>
</html>

关键优化点 #

• 新增updatePartDetails函数，统一处理零件参数的判断逻辑，便于复用和维护。
• 在queuePart中添加空输入校验，避免无效添加。
• 对输入值进行trim()和大小写转换，提升用户输入的容错性。
• 在完成零件后，根据队列状态更新最新零件的详情，队列为空时清空详情区域。

内容的提问来源于stack exchange，提问作者Austin Drake