I'm trying to make a button that when clicked adds an input tag to the page and gives it an id. The code to get the id is stored in an object. The code looks like this:

document.getElementById('signup-students-input'   currentInputTagNumber ).value 

Then the code is ran through an eval function like so

console.log (eval(theObject.getInfo()))

And the eval creates this code

document.getElementById('input-3').value

However, this returns an empty string in the console and using an alert function.

I've attached a code snippet below:

        var newStudentBtn = document.getElementById ("new-student");
        var students = document.getElementById ("students");
        var signupStudents = 1;
        var cost = document.getElementById ("cost");
        var confiredStudent = "";
        
        let ids = new Object ();
        ids.idNames = "";
        ids.getInfo = function () {
            return this.idNames;
        };


        
        var newStudentBtnOnClick = function () {
            signupStudents  ;
            let newStudent = document.createElement ("input");
            newStudent.placeholder="Type your child's first and last name here";
            newStudent.id = "signup-students-input"   signupStudents;
            
            let newStudentHeading = document.createElement ("h3");
            let studentNewLine = document.createElement ("br");
            newStudentHeading.innerHTML = "Child ("   signupStudents   ") First and Last Name";
            students.appendChild (newStudentHeading)
            students.appendChild (newStudent);
            
            cost.innerHTML = signupStudents*39
            if (signupStudents === 2) {
            ids.idNames  = "document.getElementById("   "'signup-students-input'   signupStudents "   ").value "
            }
            else {
                ids.idNames  = "  document.getElementById ('signup-students-input'   signupStudents).value "
            }
            
            
            console.log (ids.getInfo())
            console.log (eval(ids.getInfo()))
        };
        newStudentBtn.addEventListener ("click", newStudentBtnOnClick);

    <div >
        <nav>
            <a href="index.html"><img src="img_2.jpg" ></a>
            <div >
                <button >About Us</button>
                <button >Classes</button>
                <button >Contact Us</button>
            </div>
        </nav>
    </div>
    <div >
        <h1>Signup for the Intermedite Class</h1>
    </div>
    <div >
        <div ><h2>Please fill out the form</h2></div>
       
        <div >
            <form>
                <div id="students">
            <h3>Parent First and Last Name</h3>
            <input placeholder="Type your first and last name here" required id="parent-name">
            <h3>Child (1) First and Last Name</h3>
            <input placeholder="Type your child's first and last name here" required  id="student-1-name">
        </div>
            
        <br><br><button  id="new-student" type="button">New Student</button><br><br>
            <h3>Parent Email Address</h3>
            <input placeholder="Type your email address here" required id="email">
            <h3>Parent Phone Number (For Emgerency Contact Only)</h3>
            <input placeholder="Type your phone number here" required id="phone">
            <p>Please pay $<span id="cost">39</span> cash after your childs first class.</p>
            <button  type="submit" id="send-btn">Enroll</button>

</form>
        </div>
        
        
    </div>
    </div>

CodePudding user response：

I think the problem is that you are adding a string to ids.idNames instead of the variable signupStudents. I also changed the id of the default input from "student-1-name" to "signup-students-input1" and changed the ids.idNames default value. Here's a demo:

var newStudentBtn = document.getElementById ("new-student");
        var students = document.getElementById ("students");
        var signupStudents = 1;
        var cost = document.getElementById ("cost");
        var confiredStudent = "";
        
        let ids = new Object ();
        // changed this line
        ids.idNames = "document.getElementById('signup-students-input1').value";
        ids.getInfo = function () {
            return this.idNames;
        };


        
        var newStudentBtnOnClick = function () {
            signupStudents  ;
            let newStudent = document.createElement ("input");
            newStudent.placeholder="Type your child's first and last name here";
            newStudent.id = "signup-students-input"   signupStudents;
            
            let newStudentHeading = document.createElement ("h3");
            let studentNewLine = document.createElement ("br");
            newStudentHeading.innerHTML = "Child ("   signupStudents   ") First and Last Name";
            students.appendChild (newStudentHeading)
            students.appendChild (newStudent);
            
            cost.innerHTML = signupStudents*39

            /* changed these lines */
            ids.idNames  = "  document.getElementById('signup-students-input"   signupStudents   "').value";
            
            
            console.log (ids.getInfo())
            console.log (eval(ids.getInfo()))
        };
        newStudentBtn.addEventListener ("click", newStudentBtnOnClick);

<div >
        <nav>
            <a href="index.html"><img src="img_2.jpg" ></a>
            <div >
                <button >About Us</button>
                <button >Classes</button>
                <button >Contact Us</button>
            </div>
        </nav>
    </div>
    <div >
        <h1>Signup for the Intermedite Class</h1>
    </div>
    <div >
        <div ><h2>Please fill out the form</h2></div>
       
        <div >
            <form>
                <div id="students">
            <h3>Parent First and Last Name</h3>
            <input placeholder="Type your first and last name here" required id="parent-name">
            <h3>Child (1) First and Last Name</h3>
            <!-- this line changed -->
            <input placeholder="Type your child's first and last name here" required  id="signup-students-input1">
        </div>
            
        <br><br><button  id="new-student" type="button">New Student</button><br><br>
            <h3>Parent Email Address</h3>
            <input placeholder="Type your email address here" required id="email">
            <h3>Parent Phone Number (For Emgerency Contact Only)</h3>
            <input placeholder="Type your phone number here" required id="phone">
            <p>Please pay $<span id="cost">39</span> cash after your childs first class.</p>
            <button  type="submit" id="send-btn">Enroll</button>

</form>
        </div>
        
        
    </div>
    </div>