javascript按钮onclick按下仅起作用一次

Question

I am quite new to Javascript, and have the following question:

HTML:

<div id="button"></div>

JS:

for (var items in $scope.data.users){
    if ($scope.data.users.hasOwnProperty(items)) {
        document.getElementById("button").innerHTML += "<button onclick='console.log(5)'>"+items+"</button>";
        console.log(items);
    }
}

So far it works that all users in my json object are read and a button is created for each item, and when I click on a button, it shows the correct test "5" in the console. However, when I repeat the click, there comes an error, and I do not know why...

Answer 1

I think your array, or the scope, is changed on the click event.

Although the following example is not written with (what I believe) your Angular modules, it does work and iterates over a list, creating buttons and nót throwing any errors or exceptions. Basically it is the same code with a different array. Try to find the difference between this and your own code.

The only thing I changed, is making $scope.data.users an array of integers.

 let arr = [1, 2, 3]; for (var items in arr){ if (arr.hasOwnProperty(items)) { document.getElementById("button").innerHTML += "<button onclick='console.log(5)'>"+items+"</button>"; console.log(items); } } 

 <div id="button"></div>