1. Я пытаюсь получить значение ввода из элемента li.
  2. Я пытаюсь сделать это значение соответствующим тегу name = '' другого элемента
  3. Я пытаюсь сделать все это динамически с помощью JS, с точки зрения того, что элемент <input> будет создан с помощью JS, а затем его имя = '' будет назначено через JS

По сути, проблема в том, что независимо от того, каким образом я вызываю createMetafield (${shopCode}); $ shopCode всегда возвращается как undefined, оставляя элементы следующим образом: 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>
2
BoogaBooga 23 Ноя 2021 в 18:04
Я пробовал вызвать функцию так: var example = getShopName (); createMetafield (пример); Я пробовал хранить $ shopNameTest в глобальном, пробовал createMetafield (getShopName ()); все безрезультатно: ((
 – 
BoogaBooga
23 Ноя 2021 в 18:05
Ура за форматирование и спасибо за ответ, я вызываю createMetafield () после создания функции
 – 
BoogaBooga
23 Ноя 2021 в 18:09
Что вы ожидаете от ${shopCode}? Кажется, это нигде не определено. Также возврат значения из обработчика событий (почти всегда) не имеет смысла, поскольку браузер игнорирует большинство возвращаемых значений (кроме false, чтобы остановить распространение события).
 – 
Pointy
23 Ноя 2021 в 18:09
Где createMetafield? Я не вижу этого в HTML
 – 
mplungjan
23 Ноя 2021 в 18:09
1
the id="createMetafield" is not in this HTML, Пожалуйста, добавьте его, так как нам нужен минимальный воспроизводимый пример
 – 
mplungjan
23 Ноя 2021 в 18:17

2 ответа

Лучший ответ

Я думаю, ваша ошибка заключается в том, что вы вызываете return внутри одной из этих вложенных функций, что не приведет к тому, что родительская функция вернет значение.

Я предлагаю использовать синтаксис for (const e of collection) { } вместо этих вложенных лямбда-функций. Вот документ о новом синтаксисе для: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

2
Sam Watkins 23 Ноя 2021 в 18:17
1
Я мог бы ударить себя и поцеловать тебя! цикл for (const e of collection) помог, потому что да, я полагаю, возврат терялся во вложенных циклах?
 – 
BoogaBooga
23 Ноя 2021 в 18:25
For (const e of collection) не является эффективным методом получения кода из текущего активного LI.
 – 
mplungjan
23 Ноя 2021 в 19:06
Да, циклы forEach сами по себе являются функциями и могут иметь возвращаемое значение. Поэтому использование там return не является ошибкой. Но возврат внутри forEach не вызывает автоматически возвращаемого значения функции, которая вызвала forEach.
 – 
Peter Krebs
23 Ноя 2021 в 19:14
Хорошо, это имеет смысл, спасибо за разъяснения :)
 – 
BoogaBooga
23 Ноя 2021 в 19:16

Я думаю, вам нужен этот код - вы фактически не используете найденное значение

Щелчок устанавливает активный, а другой щелчок получает и создает

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>
1
mplungjan 23 Ноя 2021 в 19:07
Да, это тоже работает! и это то, что я хотел, ура :)
 – 
BoogaBooga
23 Ноя 2021 в 18:36
Я бы сказал, что это, вероятно, более полный ответ, чем другой ответ
 – 
mplungjan
23 Ноя 2021 в 18:38
Они оба являются правильным ответом :) Но я считаю, что можно принять только один ответ, нет?
 – 
BoogaBooga
23 Ноя 2021 в 18:41
Это правильно. Но как оба могут быть правильным ответом? В принятом ответе сказано, почему, но мой ответ показывает, как
 – 
mplungjan
23 Ноя 2021 в 18:45
Также я не согласен, что вам вообще нужен for..of
 – 
mplungjan
23 Ноя 2021 в 18:46