Question

我正在处理以下代码。我的目的是能够从特定网站获取有关不同用户的信息，显示名称和其他信息，然后点击一个按钮，打印更多信息。我能够获取信息并显示名称和图片，但是当我单击按钮时，信息显示在页面顶部，而不是在单击的特定按钮下。我想要在每个用户下显示信息...我是Javascript的新手，并且我自己学习，任何帮助表示赞赏！

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

打印功能

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

这很好用。我只是用动态id创建div并将其传递给函数

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

将“this”关键字作为参数添加到您的onclicks，以传递已点击的按钮：

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

然后在事件处理程序中的该按钮之后找到下一个div：

function printF(btn, array) {
    var out = "";
    var i;
    for (i = 0; i < array.length; i++) {
        out += array[i].id+'</br>';
    }
    // find the div
    var d = btn;  // start with the button
    while (d.tagName != "DIV") d = d.nextSibling; // look for the next div
    d.innerHTML = out;
}

如何使用javascript

2 个答案: