每次调用 onclick 函数时显示不同的文本

Question

我有这段代码试图从我的 firebase 数据库中提取用户：

function pullFromDB(){
        usersRef.on('value', function(snapshot) {
          function next_user(){
            for (user in snapshot.val().users){
              document.getElementById("users").innerHTML = user
            }
          }

到目前为止，它只会返回一个用户，因为我认为它必须遍历整个用户数组，然后将姓氏放入“用户”元素中。 如何在每次单击按钮时迭代到数组中的下一项并显示不同的名称？

Answer 1

我不知道从 DB 返回什么，但首先尝试 console.log() 以查看结果类型。如果您正在处理数组或其他数据类型，这将为您提供答案。

如果是数组，你的代码：

for (user in snapshot.val().users){
              document.getElementById("users").innerHTML = user
}

它迭代整个数组，.innerHTML 将 user 字符串作为最后一次迭代。如果您想在每次单击按钮时更改它，您需要一个变量，该变量将包含当前应用于 id="users" 的索引整数。

然后，对于每次点击，您需要将变量增加一。 这是在 JS 中使用数组的示例。 http://www.w3schools.com/js/tryit.asp?filename=tryjs_array_element

Answer 2

您正在遍历整个数组，只有最后一个可能显示。您只需要分配一个索引并使用它。

我不知道你剩下的代码，但根据给定的信息，这应该是诀窍：

i = 0;

function pullFromDB(){
  usersRef.on('value', function(snapshot) {
    lastnames = Object.keys(snapshot.val().users); // get all keys, in your case the last names
    function next_user(){
      user = lastnames[i];
      document.getElementById("users").innerHTML = user;
      i++; // increase after click
      // when you want to access more information of the user, you can do it like this (as an example)
      // user_id = snapshot.val().users[user].id;
    }