新手求助：使用setAttribute在HTML输入框显示IP值失败问题排查

数据老陈

2026-8-15

问题排查与修复方案

你的代码里存在几个关键问题，直接导致功能失效：

函数名大小写不匹配：定义的函数是showIP（大写I），但fetchIP里调用的是showip（小写i），JavaScript对大小写敏感，这会触发函数未定义的错误。
showIP函数未接收参数且赋值错误：当前showIP没有接收传入的IP数据，还把字符串"ip"硬赋值给input，而非实际获取到的IP值。
设置input值的方式不合理：用setAttribute("value", ...)修改input值，有时不会同步更新输入框的显示内容，直接操作element.value更稳妥。

修正后的代码

HTML部分（无需修改）

<html>    
    <body>
        <input type="text" class="form-control" readonly="true" placeholder="IP" aria-label="IP" id="ip-display">
    </body>
</html>

JavaScript部分

function showIP(ipData) {
  const ipInput = document.getElementById("ip-display");
  // 直接操作value属性，确保输入框显示正确值
  ipInput.value = ipData.ip;
}

async function fetchIP() {
  try {
    const response = await fetch('https://api.ipify.org?format=json');
    const ipData = await response.json();
    console.log(ipData);
    // 调用正确的函数名
    showIP(ipData);
  } catch (error) {
    console.error("获取IP失败:", error);
  }
}

fetchIP();