无法访问eventListener中的HTML元素

Question

我的html文档中有几个按钮，如下所示：

<button id="demo" type="button" class="btn btn-primary btn-sm mapButton">Map</button>

现在我使用类mapButton为所有这些按钮添加一个eventListener。

var allMapButtons = document.getElementsByClassName("mapButton");

for (var i = 0; i < allMapButtons.length; i++) {
    allMapButtons[i].addEventListener('mouseover', function() { 
    alert("button mouseover");//works
    allMapButtons[i].innerHTML = "123"; //doesn't work
    document.getElementById("demo").innerHTML = "sometext"; //doesnt' work
});
}

我希望在事件发生时更改按钮的文本和其他内容。但只有上述代码中的alert(...)语句有效。即使我删除alert(...)语句，innerHTML语句也不起作用。如何用我的方法更改按钮的文本？