How to make the stopFly function work?

js part

function createOneSnow(){
    var leftX = Math.random()*window.innerWidth;
    var topY = Math.random()*window.innerHeight;
    var snowDiv = document.createElement("div");
    snowDiv.style.position = "fixed";
    snowDiv.style.left = leftX + "px";
    snowDiv.style.top = topY + "px";
    var targetImg= document.createElement("img");
    targetImg.src = "image/white-snow.png";
    targetImg.style.width = "20px"; 
    snowDiv.appendChild(targetImg);
    document.body.appendChild(snowDiv);
}

function createManySnow(){
    for (var i = 0 ; i < 20 ; iPP) {
        createOneSnow();        
    }
}


function startFly(){
    var allSnows = document.getElementsByTagName("div");
    snowLength = allSnows.length;
        for (var i = 0 ; i < snowLength; iPP) {
            var randomTop = Math.random()*6;
            allSnows[i].style.top = allSnows[i].offsetTop + randomTop + "px";
            if( allSnows[i].offsetTop % 500 == 0 ) {
               createOneSnow();
            }
            if(allSnows[i].offsetTop > window.innerHeight){
                allSnows[i].remove();
                createOneSnow();
            }
        }
        document.getElementById("startButton").disabled = "disabled";
        document.getElementById("stopButton").disabled = "";
}
 
function stopFly(){
    clearInterval(timer);
    document.getElementById("startButton").disabled = "";
    document.getElementById("stopButton").disabled = "disabled";
}
    
window.onload=function(){
    createManySnow();
    setInterval(startFly,100);
}

html part

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fly</title>
    <link rel="stylesheet" href="p1.css">
    <script src="p1.js"></script>
</head>
<body>
    <audio  loop="loop" autoplay="autoplay">
        <!--        <source src="fly.mp3" type="audio/mpeg" />  -->
            don"t surpport the music
    </audio>
    <input type="button" value="" onclick="createManySnow();">
    <input type="button" id="startButton"  value=""  onclick="timer=setInterval(startFly,100)">
    <input type="button" id="stopButton"     value="" onclick="stopFly();">
</body>
</html>

After the

web page opens, snowflakes are generated and fall automatically, but press the stop key and the stopFly function fails. It is estimated that the timer,
clearInterval (timer); cannot be found.

excuse me, how do I make onclick= "stopFly ();" work?

all the code, image, the source code involved in this question please download.