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

时间:2016-09-04 19:00:12

标签: javascript arrays firebase firebase-realtime-database

我有这个代码,我试图从firebase数据库中提取用户:

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

到目前为止,它只返回一个用户,因为我认为它必须通过整个用户数组,然后将姓氏放入"用户"元件。 如何在每次单击按钮时迭代到数组中的下一个项目并显示不同的名称?

2 个答案:

答案 0 :(得分:0)

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

然后,如果它是一个数组,你的代码:

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

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

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

答案 1 :(得分:0)

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

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

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