What's wrong with this code trying to get the element nearest to it

Question

This script (JavaScript and jquery) is not functioning right.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<!DOCTYPE html>
<script>
mycars = {};

function dodat(){
var btn=document.createElement("div");
btn.style.width="25px";
btn.style.height="25px";
btn.style.backgroundColor="red";
btn.style.boxShadow="inset 0px 0px 0px 2px black";
btn.style.position="absolute";
btn.style.left="0px";
var numba = Math.round(Math.random()*10000000000);
btn.id=numba;
mycars[numba] = -100;

var move = function(){
mycars[numba] = mycars[numba]+1;
document.getElementById(numba).style.left=mycars[numba]+"px";
};

setInterval(move, 10);

document.getElementById("track").appendChild(btn);
}
</script>

<body>

<div style="background-color:#c3c3c3;width:500px;height:25px;overflow:hidden;position:relative;" id="track"></div>

<div id="shoot"></div>
</body>

<script>
setInterval("dodat();", "1000");
</script>

<script>
function dis(){
// Let's find the closest block!
var otherEls = $('div:not(#shoot):not(#track)'),
    compareTop = compareEl.offset().top,
    compareLeft = compareEl.offset().left,
    winningScore = Infinity,
    score, winner, curEl;

otherEls.each(function() {
    // Calculate the score of this element
    curEl = $(this);
    score = Math.abs(curEl.offset().top - compareTop) + Math.abs(curEl.offset().left - compareLeft);
    if (score < winningScore) {
        winningScore = score;
        winner = this;
    }
});

alert('' + winner.id + '. Let me colour it green for you.');
}
setTimeout("dis();", "1000");
</script>

The last part of the script tries to utilize jQuery to get the elements closest to #shoot , however I must be doing something wrong. Thank you so much :) I want to know what's wrong! I evaled the function, in case if that was the problem.

Answer 1

Multiple errors. compareEl was undefined, and your script was running before document ready. Once you fix that, you couldn't use global scope.

Fixed code: http://jsfiddle.net/5fJrx/

$(document).ready(function () {
mycars = {};
compareEl = $("#shoot");

function dodat() {
    var btn = document.createElement("div");
    btn.style.width = "25px";
    btn.style.height = "25px";
    btn.style.backgroundColor = "red";
    btn.style.boxShadow = "inset 0px 0px 0px 2px black";
    btn.style.position = "absolute";
    btn.style.left = "0px";
    var numba = Math.round(Math.random() * 10000000000);
    btn.id = numba;
    mycars[numba] = -100;

    var move = function () {
        mycars[numba] = mycars[numba] + 1;
        document.getElementById(numba).style.left = mycars[numba] + "px";
    };

    setInterval(move, 10);

    document.getElementById("track").appendChild(btn);
}

setInterval(dodat, 1000);

function dis() {
    // Let's find the closest block!
    var otherEls = $('div:not(#shoot):not(#track)'),
        compareTop = compareEl.offset().top,
        compareLeft = compareEl.offset().left,
        winningScore = Infinity,
        score, winner, curEl;

    otherEls.each(function () {
        // Calculate the score of this element
        curEl = $(this);
        score = Math.abs(curEl.offset().top - compareTop) + Math.abs(curEl.offset().left - compareLeft);
        if (score < winningScore) {
            winningScore = score;
            winner = this;
        }
    });

    alert('' + winner.id + '. Let me colour it green for you.');
}
setTimeout(dis, 1000);
});

What's wrong with this code trying to get the element nearest to it

Question

1 answers

solution1
0 2013-12-13 20:41:18

What's wrong with this code trying to get the element nearest to it

Question

1 answers

solution1 0 2013-12-13 20:41:18

solution1
0 2013-12-13 20:41:18