JavaScript for element repetition (for-loop) and record responses-CodePudding

I am very new to HTML and js, facing problems that I have struggled with for days. None of my attempts works. It is so hard for a novice to comprehend information found on the internet.

The goal is to replace the repeated div, i.e. <div id="page1">, <div id="page2">, <div id="page3"> and its iterable components (img scource 1~3, etc) with one "for loop" by JavaScript.

Plus, the response on each page need to be recorded in order to compute accuracy and show it on the last page. Please help me :( Thank you so much....

Here are the codes (see how it works on codepen: https://codepen.io/azaleawang/pen/mdMajNK?editors=1000 ):


<script>
var order = new Array(1,2,3,4);
var current = 0; //current trial

$(document).ready(function(){
 ShowTrial(current);
});

function ShowTrial(t) {
 $("#page"   order[t]).show();
 var N = t 1; //counting from 1
 $(".progress").text('(' N '/' order.length ')');
}

function NextTrial() {
 $("#page"   order[current]).hide();
 current  ;
 ShowTrial(current);
}
</script>

<style> .page {display: none;} </style> 

Please indicate the sex of this face:

Here is the repeated div need to be replaced and record user's response (cannot figure out the way to do it QQ):

<div class="page" id="page1">
<img src=1.jpg><br>
<input type=radio name=f1 value=M> M
<input type=radio name=f1 value=F> F <br>
<a href="javascript:NextTrial()">Next</a> 
<span class="progress"></span>
</div>

<div class="page" id="page2">
<img src=2.jpg><br>
<input type=radio name=f2 value=M> M
<input type=radio name=f2 value=F> F <br>
<a href="javascript:NextTrial()">Next</a> 
<span class="progress"></span>
</div>

<div class="page" id="page3">
<img src=3.jpg><br>
<input type=radio name=f3 value=M> M
<input type=radio name=f3 value=F> F <br>
<a href="javascript:NextTrial()">Next</a> 
<span class="progress"></span>
</div>

<div class="page" id="page4">
<h3>All done! Thanks!</h3>
</div>

This is what I've tried but failed....

<div class="page" id="page1">
</div>
<script>
document.write('Please indicate the sex of this face:');
count = ['1','2','3'];
var pageNo= document.getElementById('page1');
container = document.getElementById('page1');
 for(i = 1; i < count.length 1; i  ){
   container.innerHTML ='<img src=' i '.jpg><br>';
   container.innerHTML ='<input type=radio name=f1 value=M> M'
   container.innerHTML ='<input type=radio name=f1 value=F> F <br>'
   container.innerHTML ='<a href="javascript:NextTrial()">Next</a> ';
   container.innerHTML ='<span class="progress"></span>';
   pageNo.id='page' i;
 }

</script>

<div class="page" id="page4">
   <h3>All done! Thanks!</h3>
</div>

CodePudding user response：

Based on your Javascript code, it would generate something like this (technically, all the dynamic code would be on one line; just did it this way for readability):

<div class="page" id="page3">
    <img src=1.jpg><br>
    <input type=radio name=f1 value=M> M
    <input type=radio name=f1 value=F> F <br>
    <a href="javascript:NextTrial()">Next</a>
    <span class="progress"></span>
    <img src=2.jpg><br>
    <input type=radio name=f1 value=M> M
    <input type=radio name=f1 value=F> F <br>
    <a href="javascript:NextTrial()">Next</a>
    <span class="progress"></span>
    <img src=3.jpg><br>
    <input type=radio name=f1 value=M> M
    <input type=radio name=f1 value=F> F <br>
    <a href="javascript:NextTrial()">Next</a>
    <span class="progress"></span>
</div>
<script>
document.write('Please indicate the sex of this face:');
count = ['1','2','3'];
var pageNo= document.getElementById('page1');
container = document.getElementById('page1');
 for(i = 1; i < count.length 1; i  ){
   container.innerHTML ='<img src=' i '.jpg><br>';
   container.innerHTML ='<input type=radio name=f1 value=M> M'
   container.innerHTML ='<input type=radio name=f1 value=F> F <br>'
   container.innerHTML ='<a href="javascript:NextTrial()">Next</a> ';
   container.innerHTML ='<span class="progress"></span>';
   pageNo.id='page' i;
 }

</script>

<div class="page" id="page4">
   <h3>All done! Thanks!</h3>
</div>

Based on what you said you're expecting, this isn't what you want, but that's what will happen if all you do is modify and append to the same page. You should make a separate container instead, and add the pages to that first.

Also, you should avoid using innerHtml, as you can accidentally delete code when messing with it, or even miss ending tags. Use appendChild() instead.

Example:

var container = document.getElementById('container');
for (var i = 1; i <= 3; i  ) {
    var page = document.createElement('div');
    page.classList.add('page'); // or `page.className = 'page';` if you have to support IE
    page.id = 'page'   i;
    
    var img = document.createElement('img');
    img.src = i   '.jpg';
    page.appendChild(img);
    
    // Repeat for remaining elements

    container.appendChild(page);
}