0

I have a block of code, a quiz creation template, and i need the block of code for the question and possible answers to be looped, for however many times the user asks for. I have been trying for hours and im really not sure whats wrong.

<div id="questionform" class="modal">

I already have the amount of questions the user would like under this line of code.

var amount = prompt("Please enter the amount of questions you would like", "<amount goes here>");

below is the javascript i am using to try and loop the writing within the div. 

var i;
var amount;
var contents = document.getElementById("questionform").innerHTML;
for (i = 1; i=amount; i++) {
a.document.write(contents);
}
j08691
  • 204,283
  • 31
  • 260
  • 272
katekatekate
  • 39
  • 6
  • 1
    Your bottom snippet does not define a value for `amount`. Also your `for` statement is malformed. You set the value of `i` to 1, and then set the value of `i` to what is in `amount`, which is undefined, and then you try to increment that undefined – Taplar Feb 10 '20 at 17:38
  • 1
    The second part of the `for()` loop header should be a comparison, not an assignment. – Barmar Feb 10 '20 at 17:39
  • What is `a.document`? You're writing the same contents every time. – Barmar Feb 10 '20 at 17:40
  • also, never, ever, use `document.write`. It [does not do what you think it does](http://pomax.github.io/1473270609919/if-you-use-use-document-write-you-suck-at-javascript), use normal modern JS APIs instead, in this case `.textContent = ...` – Mike 'Pomax' Kamermans Feb 10 '20 at 17:41
  • You should have an array of questions, and loop over that, putting the questions into the DIV by appending to `innerHTML`. – Barmar Feb 10 '20 at 17:41
  • @Barmar `textContent`, not `innerHTML`. You only use the latter if you actually need to create HTML out of string data, in which case you should pause and ask yourself if you can't do that safely, instead, using normal DOM API functions instead. – Mike 'Pomax' Kamermans Feb 10 '20 at 17:41
  • @Mike'Pomax'Kamermans He probably would want to structure the questions in some way, probably using nested divs and spans. – Barmar Feb 10 '20 at 17:42
  • 1
    And learn how JS works, because none of this code makes sense, and gets the absolute basics of not just JS, but even just programming a for loop, wrong. I strongly recommend finding a modern HTML5 + JS (ES6+, not ES5 or earlier) tutorial, or a good book on learning JS from 2019 or newer. – Mike 'Pomax' Kamermans Feb 10 '20 at 17:44
  • i reallly am not sure what i am doing with javascript. i am very new to it and this for loop was just what i saw off a website. – katekatekate Feb 10 '20 at 17:47
  • If you are looking for a good resource to pick up JavaScript you can't go wrong with [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) It's an open source book that's freely available and absolutely fantastic. – Adam H Feb 10 '20 at 17:49
  • We are helping by pointing out logic flaws. Also your question states you already have the number of questions from a prompt, but your bottom snippet doesn't show that. So that is a disconnect between what you say you have, and what you actually have. – Taplar Feb 10 '20 at 17:49

1 Answers1

0

Your condition in your for-loop is wrong. You have an assignment instead of an evaluation.

for (i = 1; i=amount; i++)

You should be creating elements and appending them to the DOM. Avoid using document.write. Also, please begin indexing at zero, unless you need to start at 1.

Update

If you provide a name attribute to your input fields, they will be submitted with the form on submit.

input.setAttribute('name', 'answer[]');

When you hit submit, the input field values will be sent to the server as:

answer=foo&answer=bar

or:

{ "answer" : [ "foo", "bar" ] }

Refer to this if you are still confused: POST an array from an HTML form without javascript

Example

let amount = prompt("Please enter the amount of questions you would like", 5);
let questionForm = document.getElementById("question-form");
let answerList = questionForm.querySelector(".answer-list");

for (let i = 0; i < amount; i++) {
  let inputWrapper = document.createElement('DIV');
  let label = document.createElement('LABEL');
  let input = document.createElement('INPUT');
  
  input.setAttribute('type', 'text');
  input.setAttribute('name', 'answer[]');
  label.textContent = 'Answer ' + String.fromCharCode(i + 65) + ': ';
  inputWrapper.classList.add('input-wrapper');
  inputWrapper.appendChild(label);
  inputWrapper.appendChild(input);
  answerList.appendChild(inputWrapper);
}
.input-wrapper {
  margin-bottom: 0.25em;
}

.input-wrapper label {
  display: inline-block;
  width: 5em;
  font-weight: bold;
}
<form id="question-form" class="modal">
  <div class="answer-list"></div>
  <button type="submit">Submit</button>
</form>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132