Error in javascript. Uncaught ReferenceError: leftOrRight is not defined

ReinisStrauts
August 12, 2023
308 views
2 votes
3 Answers

<meta charset="UTF-8">

<title>Reaction game</title>

<style>

    #container {

        background: lightgreen;

        width: 900px;

        height: 900px;

        margin: auto;

        display: flex;

        position: relative;

    }

    .div {

        background: red;

        width: 60px;

        height: 60px;

        

        

    }

</style>

<div id="container">

    

</div>

<script>

    let container = document.getElementById("container");

    let speedX = 60;

    function moveThis(element) {

        let currentLeft = parseInt(this.style.left) || 0;

        this.style.left = (leftOrRight() === 0 ? currentLeft + speedX : currentLeft -     speedX) + "px";

        speedX += 2;

}

    function generateDiv() {

        let newDiv = document.createElement("div");

        newDiv.classList.add("div");

        container.appendChild(newDiv);

        let style = newDiv.style;

        style.position = "absolute";

        function leftOrRight() {

        let value = Math.random();

            if(value < 0.5) {

                return 0

            }else {

                return 1;

            }

        }

        style.left = leftOrRight() === 0 ? 0 : 840 + "px";

        style.top = Math.floor(Math.random() * 840)+ "px";

        moveThis.bind(newDiv)();

        console.log(leftOrRight());

    };

    setInterval(generateDiv, 1000)

</script>

Uncaught ReferenceError: leftOrRight is not defined
Can someone who is good at JavaScript help me to move the newDiv
:to left if its position is on right or

:to right if its position is on left?

Please help me with this code!
ChatGPT unfortunately didn’t help me. 😭

it asks me for more information

Tags: javascript position

Answers

You defined the leftOrRight() function inside the generateDiv() function. So calling it inside the moveThis() will definitely throw an error.

You should define the leftOrRight() function outside body of the generateDiv() function.

This way:

<script>

    let container = document.getElementById("container");

    let speedX = 60;


    function leftOrRight() {

        let value = Math.random();

        if(value < 0.5) {

                return 0

        }else {

                return 1;

        }

    }

    function moveThis(element) {

        let currentLeft = parseInt(this.style.left) || 0;

        this.style.left = (leftOrRight() === 0 ? currentLeft + speedX : currentLeft -     speedX) + "px";

        speedX += 2;
    }


    function generateDiv() {

        let newDiv = document.createElement("div");

        newDiv.classList.add("div");

        container.appendChild(newDiv);

        let style = newDiv.style;

        style.position = "absolute";

        style.left = leftOrRight() === 0 ? 0 : 840 + "px";

        style.top = Math.floor(Math.random() * 840)+ "px";

        moveThis.bind(newDiv)();

        console.log(leftOrRight());

    };

    setInterval(generateDiv, 1000)

</script>

Goodluck!

- KhanhDuyTr
- August 12, 2023 at 11:53 am
- 0 votes
0
You defined leftOrRight() inside generateDiv() scope. But called it inside moveThis() (out side of generateDive function scope). It is out of scope.
Read more about function/variable scope

Login or Signup to reply.

- sbaginski
- August 12, 2023 at 11:54 am
- 0 votes
0
If I can see correctly, you’ve tried to reference leftOrRight from the moveThis function. Meanwhile, leftOrRight is defined in another function called generateDiv. This means that the reference called leftOrRight is only accessible from the inside of generateDiv function. To solve this, just move the leftOrRight definition out, and place it before the definition of moveThis.

I hope that I’ve understood your question correctly, and this will solve it!

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.