Kiran KN Kiran KN - 6 months ago 9
Javascript Question

Javascript not working for printing data one after the other

I am trying to write a JavaScript code that prints whatever is present in the body-tag again when you click on the add button. The basic idea is to add authors. For example suppose there is only 1 author then the user does not click on the add button but only selects whether he is a student or a teacher. Now suppose there are 3 authors for a particular instance then he selects whether he is a student or a teacher for author 1 and then clicks "add" button.Now the above set of questions again appears for author 2 and now user can select whether the 2nd author is student or teacher. For the 3rd author the user needs to click "add" again which appears below the 2nd author which allows user to click whether the 3rd author is student or teacher. Infact this can be carried out for n number of authors.Basically the authors should appear one after the other in sequence. I could only achive it for 1st user

<html>
<head>
<title>Authors</title>
<script>
function addauthor()
{
console.log('function is working');
var no;
but = document.getElementById("addauth");
no = Number(but.value)+1;
document.getElementById('next').innerHTML='<p><div>'+no+'</div> \
<p>Whom do you want to add ? </p> \
<label><input type="radio" name="add" value="student" onchange="showForm()">Student</label> \
<label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label> \
<div id=""></div> \
</p> \
<p id="next"> \
<button id="addauth" onclick="addauthor()" value="'+no+'">Add</button> \
</p>';
}
</script>
</head>
<body>
<p><div>1</div>
<p>Whom do you want to add ? </p>
<label><input type="radio" name="add" value="student" onchange="showForm()">Student</label>
<label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label>
<div></div>
</p>
<p id="next">
<button id="addauth" onclick="addauthor()" value="1">Add</button>
</p>
</body>
</html>


I am a newbie to JavaScript. Although the code works partially I know the code is inefficient but I am not sure of how to do it. If anyone knows a better or an efficient method or algorithm please suggest me.

This is where I am going wrong for author 3 and till author n

Answer

What's going on is that you are rewriting the #next html element instead of concatenating to it. You can concatenate to the HTML element:

    var no = 1; //NOTE THIS GLOBAL VAR TO KEEP THE NUMBER OF ENTRIES KNOWN TO THE FUNCTION. 
    function addauthor()
        {
            console.log('function is working');
            but = document.getElementById("addauth");
            no++; // Increase the number prior to concatenating to the #next element.
            document.getElementById('next').innerHTML +='<p><div>'+no+'</div>   \
            <p>Whom do you want to add ? </p>    \
            <label><input type="radio" name="add" value="student" onchange="showForm()">Student</label>     \
            <label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label>     \
            <div id=""></div>          \
            </p>      \
            <p id="next">   \
                <button id="addauth" onclick="addauthor()" value="'+no+'">Add</button>   \
            </p>';
        }

See the fiddle: https://jsfiddle.net/gt4c6zpL/1/

Note that this is just catering to your own code. Realistically, you would create a new element and add the code to the element and then append that element to the end of the DOM. You can get the current counter from the previous element, increment it, then append the new element with this incremented value:

    var no = 1;
    function addauthor()
        {
            console.log('function is working');
            but = document.getElementById("addauth");
            no++;
            var newEle = document.createElement('div');
            newEle.classList.add = "person";
            newEle.innerHTML ='<p><div>'+no+'</div>   \
            <p>Whom do you want to add ? </p>    \
            <label><input type="radio" name="add" value="student" onchange="showForm()">Student</label>     \
            <label><input type="radio" name="add" value="teacher" onchange="showForm()">Teacher</label>     \
            <div id=""></div>          \
            </p>      \
            <p id="next">   \
                <button id="addauth" onclick="addauthor()" value="'+no+'">Add</button>   \
            </p>';
            document.body.appendChild(newEle);
        }

Here is the fiddle for this approach: https://jsfiddle.net/gt4c6zpL/2/