wie Informationen unter einer bestimmten Schaltfläche mit JavaScript angezeigt

Question

Ich habe das folgende Stück Code, an dem ich arbeite. Mein Zweck ist es, Informationen über verschiedene Benutzer von einer bestimmten Website abrufen zu können, den Namen und andere Informationen anzuzeigen und dann über eine Schaltfläche zu verfügen, die beim Klicken weitere Informationen druckt. Ich kann die Informationen abrufen und den Namen und das Bild anzeigen, aber wenn ich auf die Schaltfläche klicke, werden die Informationen oben auf der Seite angezeigt, nicht unter der spezifischen Schaltfläche, auf die geklickt wurde. Ich möchte, dass die Informationen unter jedem Benutzer angezeigt werden ... Ich bin neu in Javascript und lerne alleine, jede Hilfe wird geschätzt!

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; 
} 

Druckfunktion

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 1

Dies funktioniert gut. Ich habe gerade div mit dynamischen IDs und übergeben sie an die Funktion

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; 


} 

Answer 2

Fügen Sie den „this“ Schlüsselwort als Parameter an Ihre onclicks, in der Schaltfläche übergeben, die geklickt wurde:

<button onclick=printRepos(this,"'+user[i].repos_url+'")>Repositories</button> 

Dann Suchen Sie die nächste div-Schaltfläche in Ihrem Event-Handler: