为什么我的innerHTML对象在分配时不会改变？

Question

在我的HTML文件中，我有一个标题，下面有两个按钮：

<h4 align="center">August 2014</h4>
<img src="images/arrow_BW_thin_left.png" alt="Previous Month" id="left" onMouseUp="funcLeft()" style="cursor:pointer">
<img src="images/arrow_BW_thin_right.png" alt="Next Month" id="right" onMouseUp="funcRight()" style="cursor:pointer">

在我的JavaScript文档中，我有一个函数“funcRight（）”：

function funcRight() {
    var month = document.getElementsByTagName("h4").item(0);
    if (month.innerHTML == "August 2014"){
        month.innerHTML="September 2014";
    } else if (month.innerHTML == "September 2014"){
        month.innerHTML="October 2014";
    }
}

单击图像时，它不会以任何方式更改innerHTML。有谁知道我做错了什么？

Answer 1

我希望使用addEventListener()而不是内联onClick。

您可以在这里轻松实现代码

document.querySelector("#right").addEventListener("click", funcRight);

function funcRight() {
    var month = document.getElementsByTagName("h4").item(0);
    if (month.innerHTML == "August 2014"){
        month.innerHTML="September 2014";
    } else if (month.innerHTML == "September 2014"){
        month.innerHTML="October 2014";
    }
}

这里是fiddle。