盡管console.log()顯示了正確的值，但無法訪問另一個函式中函式的回傳

1. 我正在嘗試從 li 元素獲取輸入的值。
2. 我試圖使該值對應于不同元素的 name='' 標簽
3. 我正在嘗試使用 JS 動態完成這一切，就<input>元素而言，將使用 JS 創建，然后將通過 JS 分配其 name=''

本質上的問題是，無論我以哪種方式呼叫 createMetafield( ${shopCode}); $shopCode 總是回傳未定義，保留元素如下： name='[key ${i} undefined ]'

如何讓我的 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>

uj5u.com熱心網友回復：

我認為您的錯誤是您return在這些嵌套函式之一內部呼叫，這不會導致父函式回傳值。

我建議使用for (const e of collection) { }語法而不是那些嵌套的 lambda 函式的東西。這是新的 for 語法的檔案：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

uj5u.com熱心網友回復：

我認為您需要此代碼 - 您實際上并未使用找到的值

單擊設定活動，另一個單擊獲取并創建

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>

標籤：javascript html

上一篇：第n個子選擇器在反應圖渲染功能中不起作用

下一篇：按行駛距離過濾城市串列