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

I want something like : $('#input').append(this.question + "<br>");

<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>

Off Topic:

@tarunrathore03041980: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your post above for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

I am not frontend expert but…

  1. Why do you need output textboxes?
  2. id of HTML-element is unique. And actually you don’t need them in this code.
  3. Your inputs will be displayed in same line. You need e.g. div for any input.
  4. You use no form? It’s possible with XHR, but normally form used.
1 Like

I recommend that you rename the id attributes to class attributes instead.

A way to do it is:

var inputs = document.querySelectorAll(".input");
Array.from(inputs).forEach(input, index) {
    var question = questions[index].question;
    input.value = question;
});
1 Like

Thank a lot for your help

One thing, ids must be unique in a page, so you should only have 1 input id and 1 output id.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.