JS & HTML: I cannot create unique HTML Input Buttons using JS

user_19193599 0
Viewed 42

I am a complete newbie to programming and I am trying to create a simple form that takes input, creates a list of 'users' and generates a button next to a list of names that allows you to expand their info in a little box beneath the list.

let friendList = []
let friendname = []
let frienddex = ''



class Person {
    constructor(fname, lname, age, job, gender) {
    this.fname = fname
    this.lname = lname
    this.age = age
    this.gender = gender
    this.job = job
    }
    
    
}   

function generate2(x) {
    let ppl = friendname.indexOf(x)
    console.log(ppl)
    document.getElementById("p_name").innerHTML = `Name: ${friendList[ppl]["fname"]} ${friendList[ppl]["lname"]}`
    document.getElementById("p_age").innerHTML = `Age: ${friendList[ppl]["age"]}`
    document.getElementById("p_occupation").innerHTML = `Job: ${friendList[ppl]["job"]}`
    document.getElementById("p_gender").innerHTML =`Gender: ${friendList[ppl]["gender"]}`
}

function submit() {
        
        let person = new Person(document.getElementById("fname").value, 
        document.getElementById("lname").value,
        document.getElementById("age").value, 
        document.getElementById("job").value, 
        document.getElementById("gender").value)
        
        friendList.push(person)
        friendname.push(person.fname)
        
        console.log(friendList)
        console.log(friendname)
}



function generate() {
        document.getElementById('flist').innerHTML = " "
        
        for (friend in friendList)
        document.getElementById('flist').innerHTML += `${friendList[friend]["fname"]} ${friendList[friend]["lname"]} <input type="button" onClick="generate2(friendList[friend]['fname'])" value='View Profile'><br> `
        console.log(friend)
        
}

but when I use this code:

function generate() {
        document.getElementById('flist').innerHTML = " "

        for (friend in friendList)
        document.getElementById('flist').innerHTML += `${friendList[friend]["fname"]} ${friendList[friend]["lname"]} <input type="button" onClick="generate2(friendList[friend]['fname'])" value='View Profile'><br> `
        console.log(friend)

}

It only generates a series of buttons with the first index (0) instead of each button containing the index of that iteration. I have been tinkering with this for hours and I cannot get it to work. Could someone school me here?

EDIT: I was trying to keep this shorter. Here is the HTML as well.

<!DOCTYPE html>

<html>
<header>
</header>
<style>

    body {
    background: black;
    color: white;
    display: fixed;
    }

</style>

<body>
    <h1>Hello World!</h1>
        <div id="field">
            <p id="flist"><span id="button"></span></P>
            
            <label for="fname">First Name</label>
            <input type="text" id="fname"><br>
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname"><br>
            
            <label for="age">Age</label>
            <input type="number" id="age"><br>
            
            <label for="occupation">Occupation</label>
            <input type="text" id="job"><br>
            
            <label for="gender">Gender</label>
            <select id="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select><br>
            
            <input type="button" id="submit" onClick="submit()" value="Submit">
            
            <label for="gen"></label>
            <input type="button" id="gen" onClick="generate()" value="Generate List">
            
        </div>
        
        <div id='profile'>
            <h1 id ='p_name'></h1>
            <h2 id='p_age'></h2>
            <h2 id='p_occupation'></h2>
            <h2 id='p_gender'></h2>
        </div>
</body>
<canvas>
</canvas>
<script src='05_24_JS.js'></script>
</html>
html javascript
1 Answers

The friend variable/reference changes each type the loop runs so when generate2() is called the friend variable refers to the current value of friend (after the loop has finished). You can fix it by grabbing the value from friend each iteration of the loop and hardcoding that value in the generated html.

let friendList = []
let friendname = []
let frienddex = ''

class Person {
    constructor(fname, lname, age, job, gender) {
        this.fname = fname
        this.lname = lname
        this.age = age
        this.gender = gender
        this.job = job
    }
}

function generate2(x) {
    let ppl = friendname.indexOf(x)
    console.log(ppl)
    document.getElementById("p_name").innerHTML = `Name: ${friendList[ppl]["fname"]} ${friendList[ppl]["lname"]}`
    document.getElementById("p_age").innerHTML = `Age: ${friendList[ppl]["age"]}`
    document.getElementById("p_occupation").innerHTML = `Job: ${friendList[ppl]["job"]}`
    document.getElementById("p_gender").innerHTML = `Gender: ${friendList[ppl]["gender"]}`
}

function submit() {

    let person = new Person(document.getElementById("fname").value,
        document.getElementById("lname").value,
        document.getElementById("age").value,
        document.getElementById("job").value,
        document.getElementById("gender").value)

    friendList.push(person)
    friendname.push(person.fname)

    console.log(friendList)
    console.log(friendname)
}

console.log(typeof(submit));


function generate() {
    document.getElementById('flist').innerHTML = " "

    for (friend in friendList) {
        document.getElementById('flist').innerHTML += `${friendList[friend]["fname"]} ${friendList[friend]["lname"]} <input type="button" onClick="generate2(friendList['${friend}']['fname'])" value='View Profile'><br> `
        console.log(friend)
    }

}
<!DOCTYPE html>

<html>
<header>
</header>
<style>

    body {
    background: black;
    color: white;
    display: fixed;
    }

</style>

<body>
    <h1>Hello World!</h1>
        <div id="field">
            <p id="flist"><span id="button"></span></P>
            
            <label for="fname">First Name</label>
            <input type="text" id="fname"><br>
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname"><br>
            
            <label for="age">Age</label>
            <input type="number" id="age"><br>
            
            <label for="occupation">Occupation</label>
            <input type="text" id="job"><br>
            
            <label for="gender">Gender</label>
            <select id="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select><br>
            
            <input type="button" id="submit" onClick="submit()" value="Submit">
            
            <label for="gen"></label>
            <input type="button" id="gen" onClick="generate()" value="Generate List">
            
        </div>
        
        <div id='profile'>
            <h1 id ='p_name'></h1>
            <h2 id='p_age'></h2>
            <h2 id='p_occupation'></h2>
            <h2 id='p_gender'></h2>
        </div>
</body>
<canvas>
</canvas>
<script src='05_24_JS.js'></script>
</html>

user_41234000
Related