Добавление элемента в новый вопрос

54
13 июня 2018, 11:20

Имеется блок с вопросом и ответами. При нажатии на "Добавить вопрос", а затем в новом вопросе "Добавить ответ" - добавляет новый ответ только в первый вопрос. Как сделать, чтобы добавлялся новый ответ в тот вопрос, в котором была нажата кнопка "Добавить ответ"?

Отображение:

var wrapper = document.getElementsByClassName("wrapper")[0]; 
var answerWrapper = document.getElementsByClassName("answer-wrapper")[0]; 
var wrapperTemplate = 
  `<section class="quiz"><div class="question"><h2>Question</h2><input type="text"></div><div class="answer-wrapper"><h2>Answer</h2><div class="answer-item"><input type="text"><input type="checkbox"></div><div class="answer-item"><input type="text"><input type="checkbox"></div></div><button onclick="addA(this)">Add Answer</button></section>`; 
var answerTemplate = 
  `<div class="answer-item"><input type="text"><input type="checkbox"></div>`; 
 
function addQ() { 
  wrapper.insertAdjacentHTML("beforeend", wrapperTemplate); 
} 
 
function addA(elem) { 
  answerWrapper.insertAdjacentHTML("beforeend", answerTemplate); 
}
* { 
  margin: 0; 
  padding: 0; 
} 
 
h2 { 
  color: gray; 
  font-family: monospace; 
} 
 
main { 
  display: flex; 
  justify-content: center; 
  margin: 1rem; 
} 
 
.quiz { 
  padding: 0.5rem; 
  border-bottom: 1px solid gray; 
} 
 
aside { 
  margin: 1rem; 
} 
 
input[type="text"] { 
  margin: 0.2rem 0; 
  outline: none; 
} 
 
input[type="checkbox"] { 
  margin: 0.3rem 0.2rem; 
}
<main> 
  <div class="wrapper"> 
    <div class="quiz"> 
      <div class="question"> 
        <h2>Question</h2> 
        <input type="text"> 
      </div> 
      <div class="answer-wrapper"> 
        <h2>Answer</h2> 
        <div class="answer-item"> 
          <input type="text"><input type="checkbox"> 
        </div> 
        <div class="answer-item"> 
          <input type="text"><input type="checkbox"> 
        </div> 
      </div> 
      <button onclick="addA(this)">Add Answer</button> 
    </div> 
  </div> 
  <aside> 
    <button onclick="addQ()">Add Question</button> 
  </aside> 
</main>

Answer 1

var wrapper = document.getElementsByClassName("wrapper")[0]; 
var answerWrapper = document.getElementsByClassName("answer-wrapper")[0]; 
var wrapperTemplate = 
  `<section class="quiz"><div class="question"><h2>Question</h2><input type="text"></div><div class="answer-wrapper"><h2>Answer</h2><div class="answer-item"><input type="text"><input type="checkbox"></div><div class="answer-item"><input type="text"><input type="checkbox"></div></div><button onclick="addA(this)">Add Answer</button></section>`; 
var answerTemplate = 
  `<div class="answer-item"><input type="text"><input type="checkbox"></div>`; 
 
function addQ() { 
  wrapper.insertAdjacentHTML("beforeend", wrapperTemplate); 
} 
 
function addA(elem) { 
  elem.parentNode.querySelector('.answer-wrapper').insertAdjacentHTML("beforeend", answerTemplate); 
}
* { 
  margin: 0; 
  padding: 0; 
} 
 
h2 { 
  color: gray; 
  font-family: monospace; 
} 
 
main { 
  display: flex; 
  justify-content: center; 
  margin: 1rem; 
} 
 
.quiz { 
  padding: 0.5rem; 
  border-bottom: 1px solid gray; 
} 
 
aside { 
  margin: 1rem; 
} 
 
input[type="text"] { 
  margin: 0.2rem 0; 
  outline: none; 
} 
 
input[type="checkbox"] { 
  margin: 0.3rem 0.2rem; 
}
<main> 
  <div class="wrapper"> 
    <div class="quiz"> 
      <div class="question"> 
        <h2>Question</h2> 
        <input type="text"> 
      </div> 
      <div class="answer-wrapper"> 
        <h2>Answer</h2> 
        <div class="answer-item"> 
          <input type="text"><input type="checkbox"> 
        </div> 
        <div class="answer-item"> 
          <input type="text"><input type="checkbox"> 
        </div> 
      </div> 
      <button onclick="addA(this)">Add Answer</button> 
    </div> 
  </div> 
  <aside> 
    <button onclick="addQ()">Add Question</button> 
  </aside> 
</main>

READ ALSO
Как правильно работать со списком checkbox&#39;ов?

Как правильно работать со списком checkbox'ов?

Это фрагмент таблицы с суммами для загрузки в БДПри загрузке (в параметрах хранимой процедуры БД) у каждого банка есть свой параметр, который...

30
Как убрать лишние символы @ из json файла?

Как убрать лишние символы @ из json файла?

Получаю данные из JSON файла более 3к строк и вывожу на страницу через jsrender, но столкнулся с проблемой, в конечных объектах, в начале у свойств,...

41
visual studio Откатить публикацию

visual studio Откатить публикацию

Я опубликовал новую версию проекта, нажав кнопку "Опубликовать"(Web deploy)Но сайт отказался запускаться с ошибкой 502

58