基于表单输入动态设置HTML图片src：figure_id获取为空问题求助

我来帮你一步步排查并解决这两个问题：

问题1：figure_id获取为空的原因 #

你当前的代码在页面刚加载完成就调用了set_image_path()，这时候用户还没在输入框里输入任何内容，所以document.getElementById("figure_id").value自然是空字符串。另外，你的表单使用了GET方法，默认提交行为会刷新页面，不仅会丢失输入内容，也不会触发你的函数去更新图片。

问题2：图片src设置错误 #

你写的document.getElementById("figure_image").img.src是错误的——getElementById("figure_image")已经直接获取到了<img>元素本身，直接使用.src属性就能修改图片路径，不需要额外加.img。

修正后的完整代码 #

HTML部分 #

<form method="GET" id="figure_choice_form">
  <label for="figure_id">Enter ID</label>
  <input type="text" id="figure_id" name="figure_id">
  <button type="submit">Load Figure</button> <!-- 添加提交按钮，明确触发操作 -->
</form>
<img id="figure_image" src="" alt="Figure Image" style="display:none;"> <!-- 初始隐藏，避免显示破碎图片 -->

JavaScript部分 #

function set_image_path() {
  // 获取输入框和图片元素
  const figureInput = document.getElementById("figure_id");
  const figureImage = document.getElementById("figure_image");
  
  // 去除输入内容的首尾空格，避免无效空输入
  const figure_id = figureInput.value.trim();

  // 处理空输入的情况
  if (!figure_id) {
    figureImage.style.display = "none";
    console.log("Please enter a valid figure ID");
    return;
  }

  // 构建图片路径并设置
  const image_path = `main/Bricklink/images/${figure_id}.png`;
  figureImage.src = image_path;
  figureImage.style.display = "block"; // 显示图片

  // 可选：处理图片加载失败的情况
  figureImage.onerror = function() {
    console.log(`Could not find image for ID: ${figure_id}`);
    figureImage.style.display = "none";
  }
}

// 绑定表单提交事件，阻止默认刷新行为
document.getElementById("figure_choice_form").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止表单默认提交刷新页面
  set_image_path();
});

// 可选：实时监听输入框内容变化，自动更新图片（不需要点击提交按钮）
document.getElementById("figure_id").addEventListener("input", set_image_path);

关键修改说明 #

• 给表单添加了提交按钮，让用户能明确触发图片加载操作
• 初始隐藏图片元素，避免页面加载时显示破碎图片图标
• 增加了输入内容的空值判断，避免无效的图片路径请求
• 绑定表单提交事件并阻止默认刷新行为，确保输入内容不会丢失
• 添加了图片加载失败的处理逻辑，提升用户体验
• 可选的实时输入监听功能，让用户输入时自动更新图片（无需点击提交）

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