JavaScript跨函数获取返回值为undefined，动态设置input的name属性失败

你代码里的核心问题出在getShopName函数的逻辑设计和作用域处理错误：

1. 原getShopName本身没有返回值，调用时天然返回undefined
2. 你写的return shopNameTest是返回给mouseout事件的回调函数，不会传递给外层getShopName
3. 事件绑定逻辑冗余，不需要通过mouseout缓存值，完全可以实时查询当前激活的标签获取店铺编码

第一步：重构getShopName函数 #

改写为调用即可直接返回当前激活店铺编码的工具函数，移除冗余的事件绑定逻辑：

function getShopName() {
  // 每次调用时实时查询当前处于激活状态的langTab
  const activeLangTab = document.querySelector('.langTab.active');
  if (activeLangTab) {
    // 直接获取标签内隐藏input的value值返回
    return activeLangTab.querySelector('input[type="hidden"]').value;
  }
  return ''; // 未找到激活标签时返回空字符串，避免出现undefined
}

第二步：修改createMetafield函数 #

每次点击创建按钮时实时调用getShopName获取最新的店铺编码，不需要把shopCode作为入参传递：

function createMetafield() {
  let i = 0;
  document.getElementById("createMetafield").addEventListener("click", () => {
    // 每次创建元素前实时获取当前店铺编码
    const shopCode = getShopName();
    // 以下原逻辑保持不变
    let container = document.createElement("div");
    let titleLabel = document.createElement("label");
    let bodyLabel = document.createElement("label");
    let textfieldTitle = document.createElement("input");
    let textfieldBody = document.createElement("textarea");
    let trashButton = document.createElement("i");
    let metafieldButton = document.getElementById("createMetafield");
    titleLabel.innerHTML = "Metafield Title:";
    bodyLabel.innerHTML = "Metafield Body:";
    textfieldTitle.name = `metafield[key ${i} ${shopCode}]`;
    textfieldBody.name = `metafield[value ${i} ${shopCode}]`;
    container.setAttribute("class", "formStyle form-group col-md-6");
    textfieldBody.setAttribute("class", "form-control");
    trashButton.setAttribute("class", "fa fa-trash");
    i++;
    titleLabel.appendChild(textfieldTitle);
    bodyLabel.appendChild(textfieldBody);
    bodyLabel.appendChild(trashButton);
    container.appendChild(titleLabel);
    container.appendChild(bodyLabel);
    metafieldButton.after(container);
  });
}

第三步：初始化调用 #

页面加载完成后直接调用createMetafield()即可，不需要传递任何参数。

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