尽管console.log()向我显示了正确的值，但无法访问另一个函数中函数的返回

Question

1. 我正在尝试从li元素获取输入的值
2. 我正在尝试使该值与另一个元素的name="标记相对应
3. 我正试图用JS动态地完成这一切，因为<input>元素将用JS创建，然后它的名称="将通过JS分配

本质上的问题是，无论我以何种方式调用createMetafield(${shopCode}($shopCode总是以未定义的形式返回，留下如下元素：name="[key$｛i｝未定义]">

如何让我的createMetafield((函数正确访问getShopName((的返回；

//JS function for getting the value out of this html. This function works and is behaving as expected: 
function getShopName() {
let langTab = document.querySelectorAll('.langTab');
let acti = document.getElementsByClassName('active');
let shopNameTest;
langTab.forEach(lang => {
lang.addEventListener("mouseout", () => {
Array.from(acti).forEach(act => {
if (act.classList.contains('langTab')) {
shopNameTest = act.childNodes[1].value;
console.log(shopNameTest);
}
});
return shopNameTest;
});
})
};
// Function which creates the new HTML element with the click of a button. 
function createMetafield(shopCode) {
var i = 0;
document.getElementById("createMetafield").addEventListener("click", () => {
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++;
console.log(i);
titleLabel.appendChild(textfieldTitle);
bodyLabel.appendChild(textfieldBody);
bodyLabel.appendChild(trashButton);
container.appendChild(titleLabel);
container.appendChild(bodyLabel);
metafieldButton.after(container);
});
}

<ul id="myTab1" class="nav nav-tabs bar_tabs right" role="tablist">
<li role="presentation" class='langTab'><a href="#tab_content11" id="home-tabb" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">FRANÇAIS</a><input type="hidden" name="shop[]" value="GWEUFR" readonly></li>
<li role="presentation" class="langTab"><a href="#tab_content22" role="tab" id="profile-tabb" data-toggle="tab" aria-controls="profile" aria-expanded="false">ENGLISH</a><input type="hidden" name="shop[]" value="GWEUEN" readonly></li>
<li role="presentation" class="langTab"><a href="#tab_content33" role="tab" id="profile-tabb3" data-toggle="tab" aria-controls="profile" aria-expanded="true">DEUTSCH</a><input type="hidden" name="shop[]" value="GWEUDE" readonly></li>
<li role="presentation" class="active langTab"><a href="#tab_content33" role="tab" id="profile-tabb3" data-toggle="tab" aria-controls="profile" aria-expanded="true">ALLGEMEIN</a><input type="hidden" name="shop[]" value="alg" readonly></li>
</ul>

Answer 1

我认为您的错误是在其中一个嵌套函数内调用return，这不会导致父函数返回值。

我建议使用for (const e of collection) { }语法，而不是那些嵌套的lambda函数。以下是关于语法的新文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

Answer 2

我认为你需要这个代码-你实际上并没有使用找到的值

点击设置活动，另一次点击获取并创建

const langTabs = document.querySelectorAll("#myTab1 .langTab")
document.getElementById("myTab1").addEventListener("click", function(e) {
const tgt = e.target.closest("li");
if (tgt && tgt.classList.contains("langTab")) {
langTabs.forEach(tab => tab.classList.remove("active"))
tgt.classList.add("active")
}
})

// Function which creates the new HTML element with the click of a button. 
document.getElementById("createMetafield").addEventListener("click", () => {
const shopCode = document.querySelector(".langTab.active input").value
var i = 0;
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++;
console.log(i);
titleLabel.appendChild(textfieldTitle);
bodyLabel.appendChild(textfieldBody);
bodyLabel.appendChild(trashButton);
container.appendChild(titleLabel);
container.appendChild(bodyLabel);
metafieldButton.after(container);
})

.active {
background-color: yellow
}

<ul id="myTab1" class="nav nav-tabs bar_tabs right" role="tablist">
<li role="presentation" class='langTab'><a href="#tab_content11" id="home-tabb" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">FRANÇAIS</a><input type="hidden" name="shop[]" value="GWEUFR" readonly>
</li>
<li role="presentation" class="langTab"><a href="#tab_content22" role="tab" id="profile-tabb" data-toggle="tab" aria-controls="profile" aria-expanded="false">ENGLISH</a><input type="hidden" name="shop[]" value="GWEUEN" readonly>
</li>
<li role="presentation" class="langTab"><a href="#tab_content33" role="tab" id="profile-tabb3" data-toggle="tab" aria-controls="profile" aria-expanded="true">DEUTSCH</a><input type="hidden" name="shop[]" value="GWEUDE" readonly></li>
<li role="presentation" class="active langTab"><a href="#tab_content33" role="tab" id="profile-tabb3" data-toggle="tab" aria-controls="profile" aria-expanded="true">ALLGEMEIN</a><input type="hidden" name="shop[]" value="alg" readonly></li>
</ul>
<button id="createMetafield">Click</button>