How to display all values of an array into different input text areas?

JavaScript
1

I want something like : $(’#input’).append(this.question + “
”);

<body>
<div id="container">
    <h1> Press 'Enter' after writing your answer. </h1>
    <input type="text" id="input" name="questions[]" />
    <input type="text" id="output" />
    <input type="text" id="input" name="questions[]" />
    <input type="text" id="output" />
    <input type="text" id="input" name="questions[]" />
    <input type="text" id="output" />
    <input type="text" id="input" name="questions[]" />
    <input type="text" id="output" />
    <input type="text" id="input" name="questions[]" />
    <input type="text" id="output" />
    <a id="sub" href="#"> Submit </a>
    <div id="result"> </div>
</div>
</body>


<script>

$('document').ready(function() {

    let questions = [
        { 
            question: "1. I like tea.",
            answer: "I do not like tea."
        },

        {
            question: "2. You are my friend.",
            answer: "You are not my friend."
        },

        {
            question: "3. She is very naughty.",
            answer: "She is not very naughty"

        },

        {
            question: "4. You can do it.",
            answer: "You cannot do it"

        },

        {
            question: "5. They are good.",
            answer: "They are not good."

        },

    ];

    $.each(questions, function() {

        $('#result').append(this.question + "<br>");

    });

 });

</script>
2
  • Your questions aren’t inputs, they’re just text. Only the outputs should be text inputs. The inputs can be label elements, which makes sense, or they can be p elements or whatever.
  • Give each of your questions a different ID in the HTML. You need to do this anyway, IDs have to be unique.
<label for="question1-output" id="question1" />
<input id="question1-output" />
<label for="question2-output" id="question2" />
<input id="question2-output" />

Then there are various ways to do this but for example, loop over your questions array, then set the text of #question1, #question2 etc in turn with the question field in the current object.

questions.forEach((question, index) => {
  // Indexing starts at 0, so add 1
  let currentId = `question${index + 1}`;

  document.getElementById(currentId).innerText =  question.question;
});