javascript - HTML5实时更新

我有一个迷宫，你可以用鼠标穿过它，我有一个生命的功能，

var life = 3;
function lives(){
life --;
}

我展示这种生活的方式是

<script type="text/javascript">
    document.write("<div id='hp'>" + "Lives: " + life + "</div>");
</script>

我正在用这些块调用该函数，但是它们无法更新生活。帮助！
    <img id="a1" src="blackpixel.png" onMouseOver="lives()"/>

最佳答案

您的onmouseover仅更新变量lives的值，但不更新实时显示。您可以在line --;之后添加以下行：

document.getElementById('hp').innerHTML = 'Lives: ' + life;