JavaScript对象为空问题

Uncaught TypeError: Cannot read properties of null (reading 'style')

改了一下午，也找不到错误点

后来发现要写成id，不能是自定义的变量

HTML:
<div class="tab">
    <!-- 电脑图 -->
    <div id="computer_img" class="computer_img1" onmouseover='onMouseOver()' onclick="changePage('computer')">
        <img src="../实验/images/电脑.png"  style="width: 72px;" alt="">
    </div>
    <!-- 二维码图 -->
    <div id="code_img" class="code_img1" onmouseover='onMouseOver()' onclick="changePage('code')">
        <img src="../实验/images/二维码.png" style="width: 72px;" alt="">
    </div>
</div>

CSS:
/* 密码登录--图标是二维码，默认展示 */
.computer_img1{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: none;
}
/* 扫码登陆--图标是电脑，默认隐藏 */
.code_img1{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
}

错误代码：

// 切换界面
function changePage(val){
    var app = document.getElementById("computer");//点的是电脑
    var normal = document.getElementById("code");//点的是二维码
    if(val == 'computer'){
        console.log("no")
        // 切换效果的关键，思路就是将要显示的 z-index 设置为 2
        normal.style.display = "block";  
        app.style.display = "none";
        // 将要隐藏的盒子的 display 设置为 none
    }
    else if(val == 'code'){
        console.log("yes")
        normal.style.display = 'none';     // 同上
        app.style.display = 'block';
    }
}

 正确代码：

// 切换界面
function changePage(val){
    var app = document.getElementById("computer");//点的是电脑
    var normal = document.getElementById("code");//点的是二维码
    if(val == 'computer'){
        console.log("no")
        // 切换效果的关键，思路就是将要显示的 z-index 设置为 2
        code_img.style.display = "block";  
        computer_img.style.display = "none";
        // 将要隐藏的盒子的 display 设置为 none
    }
    else if(val == 'code'){
        console.log("yes")
        code_img.style.display = 'none';     // 同上
        computer_img.style.display = 'block';
    }
}