将随机生成的变量传递给 setInterval

Question

我使用 setInterval 为动态创建的元素设置了动画。单击元素时，我希望它更改为随机方向（左、右、上或下）。

我认为问题是我不能将随机创建的方向传递给 setInterval 函数。

这里的html....

<div id="klicker"></div>

这里的 JavaScript .....

var box = document.getElementById("klicker");
var x = 1;
var startp = 200;
box.onclick = function() {
    var newdiv = document.createElement('div');
    document.body.appendChild(newdiv);
    newdiv.style.width = 200 + 'px';
    newdiv.style.height = 200 + 'px';
    newdiv.style.backgroundColor = 'grey';
    newdiv.style.position = 'absolute';
    newdiv.style.left = startp + "px";
    newdiv.style.top = startp + "px";
    newdiv.setAttribute('id', 'runner')
    var run = document.getElementById('runner');
    var dire = 'right';
    run.onclick = function() {
        var mov = function() {
            randoms();
        };
        function randoms() {
            alert('ddddd');
            var rnd = (Math.random() * 4) + 1; //ranom number 1-4
            var rnd_down = Math.floor(rnd); //make it en integer
            /*--- make each number a uniqe direction---*/
            if (rnd_down == 1) {
                dire = 'right';
            } else if (rnd_down == 2) {
                dire = 'left';
            } else if (rnd_down == 3) {
                dire = 'up';
            } else {
                dire = 'down';
            }
        };

        var moveit = setInterval(function() {
            movefunc();
        }, 50);

        function movefunc() {
            /*----each direction will make the div travel in diffrent directions--*/
            if (dire = 'right') {
                x = x + 1;
                newdiv.style.left = x + 'px';
            } else if (dire = 'left') {
                x = x - 1;
                newdiv.style.left = x + 'px';
            } else if (dire = 'up') {
                x = x - 1;
                newdiv.style.top = x + 'px';
            } else {
                x = x + 1;
                newdiv.style.top = x + 'px';
            }
        };
    };
}

Answer 1

function movefunc() {
            /*----each direction will make the div travel in diffrent directions--*/
            if (dire = 'right') {
                x = x + 1;
                newdiv.style.left = x + 'px';
            } else if (dire = 'left') {
                x = x - 1;
                newdiv.style.left = x + 'px';
            } else if (dire = 'up') {
                x = x - 1;
                newdiv.style.top = x + 'px';
            } else {
                x = x + 1;
                newdiv.style.top = x + 'px';
            }
        };

Rookie 错误 :) （即使它是 most common error in programming 之一，请参阅 #4 ）在您的情况下，您应该使用 == 而不是 = （用于分配，== 用于比较 ）。我什至建议您使用===，它也会比较类型。 （1 == '1' 将返回 true 而 1 === '1' 将返回 false 因为 1 是 integer 类型，而 '1' 是 char 类型）