Not able to access the return of a function inside another function despite the console.log() showin-CodePudding

I am trying to get the value of an input from a li element.
I am trying to make that value correspond to the name='' tag of a different element
I am trying to get this all done dynamically with JS, in terms of, the <input> Element will be created with JS and then its name='' will be assigned through JS

Essentially the problem is, no matter in which way I call createMetafield(${shopCode}); $shopCode always returns as undefined, leaving the elements like so: name='[key ${i} undefined]'

How can I get my createMetafield() function to properly access the return of 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>

CodePudding user response：

I think your bug is that you are calling return inside one of these nested functions, that is not going to cause the parent function to return a value.

I suggest to use for (const e of collection) { } syntax rather than those nested lambda function things. Here's doc on the new for syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

CodePudding user response：

I think you need this code - you are not actually using the found value

The click sets the active and the other click gets and creates

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>