遇到UncaughtTypeError: Cannot read property 'parentNode' of null问题怎么办

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 align="center">单击图片切换</h1>
        <p align="center"><img src="hat.png" id="image" onclick="change()"></p>
    </body>
</html>
<script type="text/javascript">
    function change(){
        var oldImage = document.getElementById("hat");
        var newImage = document.createElement("img");
        newImage.setAttribute("src","rabbit.png");
        var parent = oldImage.parentNode;//问题在这里
        parent.insertBefore(newImage,oldImage);
        parent.removeChild(oldImage);
    }
</script>

html没有这两个id的元素

var oldImage = document.getElementById("hat");你这个找的哪个元素，页面中没有id是hat的