jmor jmor - 6 months ago 13
Javascript Question

how to display information underneath a specific button using javascript

I have the following piece of code I am working on. My purpose is to be able to grab information about different users from a specific website, display the name and other info and then have a button that when clicked, prints more information. I am able to get the information and display the name and picture, but when I click the button the information is displayed at the top of the page, not under the specific button that was clicked. I want for the information to be display under each user... I am new to Javascript and learning on my own, any help is appreciated!

function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '<a href="' + user[i].url + '">' + user[i].login + '</a><br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'")>Repositories</button></br>'+'<div id="id"></div>';
}
document.getElementById("id01").innerHTML = out;
}


Printing Function

function printF(array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
document.getElementById("id").innerHTML = out;
}

Answer

This works fine. I just made div with dynamic ids and passed it to the function

function getUsers(user) {
    var out = "";
    var i;
    for (i = 0; i < user.length; i++) {
         out += '<a href="' + user[i].url + '">' + user[i].login + '</a>   <br>'+'</br> <img src="'+user[i].avatar_url+
           '" alt="Image" style="width:304px;height:228px"</br></br>'+
           '<button onclick=printRepos("'+user[i].repos_url+'","'+i+'")>Repositories</button></br>'+'<div id="'+ 'id' + i +'"></div>';
    }

   document.getElementById("id01").innerHTML = out;
}


function printRepos(array, id) {

    var out = "";
    var i;
    for (i = 0; i < array.length; i++) {
        out += array[i].id+'</br>';
    }

    console.log('id' + id);

    document.getElementById('id' + id).innerHTML = out;


}