如何在JavaScript中获取input标签的值？API请求取值异常排查

问题根源分析 #

你的代码有两个核心错误，导致无法正确获取input值并发起请求：

• URL初始化时机错误+拼接对象错误：页面加载时就固定了URL变量，此时input是空值，而且你直接把inputDOM元素拼接到URL里（不是取input.value），最终URL会变成https://openapi.izmir.bel.tr/api/iztek/bakiyesorgulama/[object HTMLInputElement]，完全不符合API要求。
• 请求未使用实时输入值：fetchValue函数一直复用页面加载时的旧URL，点击按钮时不会重新获取最新的input内容。

修正后的JS代码 #

const input = document.getElementById("in");
const btn = document.getElementById("button");

// 将请求函数改为接收卡号参数，动态生成请求URL
async function fetchValue(cardNumber) {
  const url = `https://openapi.izmir.bel.tr/api/iztek/bakiyesorgulama/${cardNumber}`;
  const response = await fetch(url);
  return await response.json();
}

const amount = () => {
  // 点击按钮时才获取实时输入值，同时去除首尾空格
  const cardNum = input.value.trim();
  
  // 空值判断，避免无效请求
  if (!cardNum) {
    document.getElementsByClassName("yazdir")[0].innerHTML = "请输入有效卡号";
    return;
  }

  fetchValue(cardNum).then((response) => {
    try {
      const result = response["UlasimKartBakiyesi"];
      const message = `当前余额: ${result["MevcutBakiye"]}`;
      document.getElementsByClassName("yazdir")[0].innerHTML = message;
    } catch (err) {
      document.getElementsByClassName("yazdir")[0].innerHTML = "查询失败，请检查卡号是否正确";
    }
  }).catch(err => {
    document.getElementsByClassName("yazdir")[0].innerHTML = "网络异常，请稍后重试";
  });
};

btn.addEventListener("click", amount);

优化后的HTML代码（可选） #

主要修正了label的for属性，点击标签时可自动聚焦输入框，提升交互体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="new.css" />
  <title>公交卡余额查询</title>
</head>
<body>
  <div class="container"></div>
  <p class="yazdir"></p>
  <label for="in">卡号输入:</label>
  <input name="in" type="text" maxlength="512" id="in" class="in"/>
  <button id="button">查询余额</button>
  <script src="./new.js"></script>
</body>
</html>

关键改动说明 #

1. 动态获取输入值：点击按钮时才读取input.value，确保使用的是用户最新输入的卡号。
2. URL动态生成：每次请求时根据当前卡号拼接URL，避免页面加载时的无效值。
3. 错误处理增强：增加空值判断、接口返回异常捕获、网络错误捕获，避免页面崩溃并给出友好提示。
4. 交互细节优化：修正label与input的关联，提升用户操作体验。

内容的提问来源于stack exchange，提问作者01d