Need help loading an object array with user input

Question

I'm trying to run a small program that loads questions onto an object array based on what the user types in an input text box. This is how the HTML looks. https://i.sstatic.net/BNdki.png

So far i've done this. i want the loop to repeat everytime the "add question" button is clicked (that button executes the function "AddQuestion"), so i added the "loop" variable, and added a for loop to show me the question's titles. but it doesn't seem to work...

class questions {
constructor(question, cat, ans1, ans2, ans3, ans4) {
    this.question = question;
    this.cat = cat;
    this.ans = ans1;
    this.ans2 = ans2;
    this.ans3 = ans3;
    this.ans4 = ans4;
 }
}

loop = 0

function AddQuestions()
        {
            loop++;
            var question = new Array(10);

            title = document.getElementById("question").value;
            category = document.getElementById("category").value;
            answ1 = document.getElementById("ans1").value;
            answ2 = document.getElementById("ans2").value;
            answ3 = document.getElementById("ans3").value;
            answ4 = document.getElementById("ans4").value;

            question[loop] = new questions (title, category, ans1, ans2, 
ans3, ans4);
            console.log(question[loop].question);

            for ( i = 0 < question.length; i++;) {
            console.log(question[i].question);
}

        }

random · Accepted Answer · 2019-07-14 05:47:56Z

1

There are certain mistakes in the code. You are initiating the loop with 0 and within the AddQuestions() it is incremented immediately and your new question is added at index 1 instead of 0. Instead increment the loop variable after the question is added.

The statement for ( i = 0 < question.length; i++;) { is incorrect. It should be for ( i = 0; i < question.length; i++) {

In AddQuestions(), an array of question(Since question is an array, rename variable question to questions) is created with fixed length of 10 elements. so the for loop for ( i = 0; i < question.length; i++) { will iterate over the empty elements too. Instead, you can create an array using - var question = [];

Also every time the question is set to empty array when the button is clicked, which will erase already inserted items earlier. Instead declare the array once outside the function AddQuestions.

class questions {
  constructor(question, cat, ans1, ans2, ans3, ans4) {
    this.question = question;
    this.cat = cat;
    this.ans = ans1;
    this.ans2 = ans2;
    this.ans3 = ans3;
    this.ans4 = ans4;
  }
}

let loop = 0;
const question = [];

function AddQuestions() {
  title = document.getElementById("question").value;
  category = document.getElementById("category").value;
  answ1 = document.getElementById("ans1").value;
  answ2 = document.getElementById("ans2").value;
  answ3 = document.getElementById("ans3").value;
  answ4 = document.getElementById("ans4").value;

  question[loop] = new questions(title, category, answ1, answ2, answ3, answ4);

  for (i = 0; i < question.length; i++) {
    console.log(question[i].question);
  }
  loop++;
}

<input type="text" id="question">
<input type="text" id="category">
<input type="text" id="ans1">
<input type="text" id="ans2">
<input type="text" id="ans3">
<input type="text" id="ans4">
<button onclick="AddQuestions()">Click</button>

edited Jul 14, 2019 at 5:47

answered Jul 13, 2019 at 6:05

random

7,9093 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

azu sdhfjdg Over a year ago

this makes perfect sense, but i tried to run it and when i enter the first question it works fine, however when i enter the second question the console says; Uncaught TypeError: Cannot read property 'question' of undefined at AddQuestions (code.js:31) line 31 is console.log(question[i].question); . i'm very confused.

random Over a year ago

@azusdhfjdg - The problem is within AddQuestions() you set question array to empty i:e question = [];. which will make the array empty everytime you click Add button. Instead declare the array outside of function AddQuestions. I have updated code snippet.

random Over a year ago

@azusdhfjdg - If the answer solves your problem, please mark it as accepted to indicate that problem has been resolved.

Nadir Latif · Accepted Answer · 2019-07-13 05:32:38Z

0

Your for loop is starting from 0, but the question array index starts from 1. You need to move the loop++; command to the end of the AddQuestions function

answered Jul 13, 2019 at 5:32

Nadir Latif

3,7671 gold badge17 silver badges24 bronze badges

2 Comments

azu sdhfjdg Over a year ago

My code still doesn't work :/ when i enter the first question it works fine, but when i enter the second question i get a console error that says; Uncaught TypeError: Cannot read property 'question' of undefined at AddQuestions (code.js:31) line 31 is console.log(question[i].question);. i'm very confused as to why it doesn't work

Nadir Latif Over a year ago

Well you need to declare the question array outside the AddQuestions function. Try to move this line var question = new Array(10); outside AddQuestions function and below the line loop = 0

Collectives™ on Stack Overflow

Need help loading an object array with user input

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related