Question

我目前正在尝试添加一个按钮，当我单击该按钮时-出现问题列表（带有textareas /输入），每个textarea /输入都有自己的ID，并且我试图获取所有答案< strong>打印为一种形式。

<h5>QUESTION BULK 1/h5>
    <div id="question1">
        <h4">#1</h4>
        <p>Relative name?: <input id="a_relative">
        <p>Age: <input id="a_age">
        <p>What makes him your relative?: <input id="a_what">
    </div>

我正试图获得一个按钮，使其添加大量问题，以便用户可以添加相关数量。例如：

<button onClick="clickMe()">Add</button>

所有来自输入的数据应在以后获取，并放入特定的“答案纸”形式。例如：

function clickMe() {
  var relative = document.getElementById("a_relative").value;
  var age = document.getElementById("a_age").value;
  var what = document.getElementById("a_what").value;
  var generatedForm = " Name: "+relative+"\n\
  Relative age: "+age+"\n\
  Reason he/she is your relative: "+what+".";

  document.getElementById("X").value = clickMe // put everything in a textarea of example, 
}

Answer 1

尝试使用JQuery，它将使您不需要使用的ID

 document.getElementById("a_relative").value;

Answer 2

这是使用现代JS方法的快速解决方案。

// Use an array to contain the questions
const questions = [

 // Each question has an id, question text, and an
 // object containing the input information
 { id: 1, text: 'Name', input: { el: 'input', type: 'text' } },
 { id: 2, text: 'Age', input: { el: 'input', type: 'number' } },
 { id: 3, text: 'How', input: { el: 'textarea' } },
];

// Grab and cache the elements from the page
const main = document.querySelector('.main');
const form = document.querySelector('form');
const output = document.querySelector('#output');
const add = document.querySelector('.add');
const show = document.querySelector('.show');

// Add event listeners for the buttons
add.addEventListener('click', handleAdd, false);
show.addEventListener('click', handleShow, false);

// When add button is clicked...
function handleAdd() {

  // ...produce html for each question in the array...
  const html = questions.map(question => {
    return createQuestionHTML(question);
  }).join('');

  // ...and add it to the form.
  form.insertAdjacentHTML('beforeend', html);
}

function createQuestionHTML(question) {

  // Grab the properties/values from the question object
  const { id, text, input: { el, type } } = question;

  // Based on the input type choose whether an input
  // or a textarea should be displayed.
  // Ensure they have an answer class, and a data attribute
  // with question text
  let input = type === 'input'
    ? `<${el} type=${type} class="answer" data-to="${text}" />`
    : `<${el} class="answer" data-to="${text}"></${el}`;

  // Return a section containing a heading of the question text,
  // and the appropriate input element
  return (
    `<section class="question">
      <h5>${id} - ${text}</h5>
      ${input}
    </section>`
  );
}

// When the show button is clicked...
function handleShow() {

  // ...select all the elements with the answer class within the form
  const answers = form.querySelectorAll('.answer');

  // Hide the form
  main.classList.add('hidden');

  // Log the value and data-to attribute text to console
  [...answers].forEach(({ value, dataset }) => {
    output.insertAdjacentHTML('beforeend', `<div>${dataset.to} => ${value}`);
  });
}

form, .buttons { margin-bottom: 1em; }
h5 { margin-bottom: 0.2em; }
.hidden { display: none }

<section class="main">
  <form></form>
  <section class="buttons">
    <button class="add">Add questions</button>
    <button class="show">Show answers</button>
  </section>
</section>
<div id="output" />

尝试使用变量来复制输入/文本区域

2 个答案: