Question

我开始使用javascript在网站上做一些小功能和调整，但是什么让我烦恼的是我不知道如何在一个函数运行后再次运行javascript？例如，如果我调用一个函数onclick将用户添加到我的网站中显示的数组，新用户将不会显示，直到页面刷新？我该如何解决这个问题？

实施例

if (!localStorage.myStorage) {
     // CREATE LOCALSTORAGE
}else{
myArray = JSON.parse(localStorage.myStorage);
for (var i = 0; i < myArray.length; i++)  {
        if(myArray[i].id === 1){
            $(".firstIdContainer").append("<p>" + myArray[i].userName + "</p>");
        }
        if(aUserLogin[i].id === 2) {
            $(".secondIdContainer").append("<p>" + myArray[i].userName + "</p>");
        }
    }
}
$(document).on("click", ".btnRegisterUser", function() {
     // ADD NEW USER TO LOCALSTORAGE
}

如何通过我的for循环显示用户立即显示我注册的新用户。

Answer 1

像：

if(!localStorage.myStorage){
  // CREATE LOCALSTORAGE
}
function doIt(){
  var myArray = JSON.parse(localStorage.myStorage);
    for(var i in myArray){
      var apd = '<p>' + myArray[i].userName + '</p>';
      if(myArray[i].id === 1){
        $(".firstIdContainer").append(apd);
      }
      else if(aUserLogin[i].id === 2) {
        $(".secondIdContainer").append(apd);
      }
    }
  }
}
doIt();
$('.btnRegisterUser').click(doIt);

Answer 2

尝试创建一个contentUpdate函数，重置所显示的内容并根据新变量再次创建它（例如，这将放在函数的底部以添加用户）。变量没有反映在DOM中的原因是DOM没有对它的制作方式进行抽象;它是输出，它不会根据输入后输入的内容自行改变。

Answer 3

如果您只想在表格中插入新行，则无需刷新页面。

jsfiddle

HTML：

<table id="usertable">
    <tr><td>user 1</td></tr>
</table>

<input id="newuser"></input>
<input id="adduser" type="submit"></input>

JS：

var button = document.getElementById('adduser');

button.onclick = function(event) {


   var user = document.getElementById('newuser').value 

   //add the user to your array here

   //add a table row
   var table = document.getElementById('usertable');
   var row = table.insertRow(0);
   var cell1 = row.insertCell(0);
   cell1.innerHTML = user;
   event.preventDefault();
}

如何在函数完成后重新运行javascript

3 个答案: