как позвонить на вход в этом сценарии? - PullRequest
Новая
       81

как позвонить на вход в этом сценарии?

0 голосов
/ 09 апреля 2020

Я хотел бы дать класс для каждого входа в этом сценарии, но я не знаю, как это сделать.

JS: 

  document.getElementsByClassName("parent")[0].addEventListener("click",function(){ document.getElementsByClassName("maco")[0].innerHTML="<form><wrap>Name: <input></wrap><wrap>Date Range from <input> to <input></wrap><wrap>Reason:<input></wrap><wrap>Name of Parent:<input></wrap><wrap><button>Enter<button></wrap></form>";
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].classList.add("pl");
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].getElementsByTagName("input")[0].classList.add("first");
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].getElementsByTagName("input")[1].classList.add("second");
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].getElementsByTagName("input")[2].classList.add("third");
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].getElementsByTagName("input")[3].classList.add("fourth");
     document.getElementsByClassName("parent")[0].getElementsByTagName("form")[0].getElementsByTagName("input")[4].classList.add("fifth"); });

я сделал выше, но браузер продолжал говорить Uncaught TypeError: Невозможно прочитать свойство 'getElementsByTagName' из неопределенного

Есть ли способ дать каждому входу в кавычке в innerHTML = "..." класс?

1 Ответ

1 голос
/ 09 апреля 2020

Поскольку вы не опубликовали свою структуру HTML, трудно быть уверенным, что это сработает, но предположим, что ваше дерево выглядит следующим образом: 

<div class="parent">
   <form>
      <input>
      <input>
      <input>
   </form>
</div>

Вот как я это сделаю. 

const numericalWords = [
  "first",
  "second",
  "third"
]


document.querySelectorAll('.parent form input').forEach((input, i) => {
  input.classList.add(numericalWords[i])
 })
.first {
    background: yellow;
 }
 
 .second {
    background: blue;
 }
 
.third {
    background: green;
 }
<div class="parent">
<form>
  <input>
  <input>
  <input>
</form>
</div>
...