TypeError: Attempted to assign to readonly property - Vanilla Javascript Mouse Position-CodePudding

My expected result is for the image to move within the container according to the calculations made on the x-axis mouse position. That is why Xratio ranges from -1 to 1.

I am not sure what is the readonly property here? I used console.log(typeof Xratio) and got "number".

I also used console.log(typeof easeOutExpo) and saw "function".

Could this be a simple mistake I am not understanding with assigning?

const bxImg = document.querySelector('.bx-pic');

document.addEventListener('mousemove', (e) => {
    const xRatio = (e.clientX / window.innerWidth) * 2 - 1;
    console.log(typeof xRatio);

    const xRatioEased = 0;
    if (xRatio >= 0) {
        xRatioEased = easeOutExpo(xRatio);
    } else {
        xRatioEased = easeOutExpo(-xRatio * -1)
    }

    bxImg.style.transform = `scale(1.2) translate3D(${-xRatioEased * 10}px, ${0}, ${0})`;
})

function easeOutExpo(n) {
    if (n === 1) {
        return 1;
    } else {
        return 1 - Math.pow(2, -10 * n);
    }
}

console.log(typeof easeOutExpo);

html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #FDFDFD;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bx-wp {
    position: absolute;
        top: 50%;
        left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 350px;
    height: 350px;
    outline: 30px solid royalblue;
}

.bx {
    position: relative;
    transform: scale(1.2);
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div >
        <img src="https://images.unsplash.com/photo-1641113994135-a9f230b1f9b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80" alt="A Mountain" >
    </div>

    <script src="script.js"></script>
</body>

</html>

CodePudding user response：

xRatioEased is a constant. Constants can be changed only on initialization. If you declare xRatioEased as a variable (with let or var), you can fix the issue.

If you want to know more about constants and when to use them, you can head over to this link

CodePudding user response：

You've declared xRatioEased as a const, so it can only be set on initialisation. Replace const xRatioEased with let xRatioEased and it should all work.