Error in Javascript Code

Question

   if(e.target.id == "cited"){
        alert(e.target.innerHTML);
        if (document.getElementById(e.target.id).innerHTML == "[1]") {
            display = "sometext1";  
        }
        else if (document.getElementById(e.target.id).innerHTML == "[2]") {
            display = "sometext2";
        }
        else if (document.getElementById(e.target.id).innerHTML == "[3]") {
            display = "sometext3";
        }

Alright, well when I hover over my [3] it displays "sometext2" when it should be displaying "sometext3". [2] and [3] is on the same page. I did add a quick debug in to see if it picking up the wrong innerHTML by doing:

alert(e.target.innerHTML);

it displays the right one when I hover over in the alert message, but I don't know why it is displaying the wrong toolTip. Any help here?

    document.onmousemove = function(e)
{
    // e.target, e.srcElement and e.toElement contains the element clicked.
    var x = e.pageX;
    var y = e.pageY;
    var display;
    if(e.target.id == "cited"){
    //  alert(e.target.innerHTML);
        if (document.getElementById(e.target.id).innerHTML == "[1]") {
            display = "sometext1";  
        }
        else if (document.getElementById(e.target.id).innerHTML == "[2]") {
            display = "sometext2";
        }
        else if (document.getElementById(e.target.id).innerHTML == "[3]") {
            display = "sometext3";
        }
        document.getElementById("toolTip").style.top = y-50+"px";
        document.getElementById("toolTip").style.left = x+"px";
        document.getElementById("toolTip").style.visibility = "visible";
        document.getElementById("toolTip").innerHTML = "<p>"+display+"</p>";
    }
    else {
        document.getElementById("toolTip").style.visibility = "hidden"; 
    }

It looks like you may have more than one element with the id cited. Each id should be unique per html page. — Andbdrew
– Andbdrew, Commented Apr 25, 2013 at 2:36
@Blender Cause I want to get the value of the innerHTML to tell what to display. I know a little bad way, but I am just doing it quick. — Matthew
– Matthew, Commented Apr 25, 2013 at 2:38
@Andbdrew I got two of them with the same id, I figured this wouldn't be an issue cause I am comparing the contents of the id's which is why I got them on the same id. I don't want to make different id for each one to do the same exact thing. — Matthew
– Matthew, Commented Apr 25, 2013 at 2:40
@Matt that is a problem :) ID's must be unique on a page or things will break. — Andbdrew
– Andbdrew, Commented Apr 25, 2013 at 2:41

Blender · Accepted Answer · 2013-04-25 03:01:51Z

1

Bad way of fixing it:

document.onmousemove = function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var display;

    if (e.target.id == "cited") {
        if (e.target.innerHTML == "[1]") {
            display = "sometext1";
        } else if (e.target.innerHTML == "[2]") {
            display = "sometext2";
        } else if (e.target.innerHTML == "[3]") {
            display = "sometext3";
        }

        document.getElementById("toolTip").style.top = y - 50 + "px";
        document.getElementById("toolTip").style.left = x + "px";
        document.getElementById("toolTip").style.visibility = "visible";
        document.getElementById("toolTip").innerHTML = "<p>" + display + "</p>";
    } else {
        document.getElementById("toolTip").style.visibility = "hidden";
    }
}

A better way would be to add event listeners to all of the elements and change their ids to classes, but that gets clumsy, so here's a jQuery solution:

$('.cited').mousemove(function(e) {
    $('#tooltip').css({
        top: e.pageY - 50 + 'px',
        left: e.pageX + 'px',
        text: $(this).data('tooltip')
    });
}).mouseleave(function() {
    $('#tooltip').hide();
}).mouseenter(function() {
    $('#tooltip').show();
});

You'd change the HTML to this:

<span class="cited" data-tooltip="This is the tooltip text">Foo</span>
<span class="cited" data-tooltip="This is the tooltip text">Bar</span>

answered Apr 25, 2013 at 3:01

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew Over a year ago

Thanks for the help, it is now fixed. I know what I did wrong and I often don't catch it till I do this.

Andbdrew · Accepted Answer · 2013-04-25 02:38:44Z

1

One problem seems to be that you have multiple elements on the same page with the same id. From your code, it seems that you have at least three elements with id cited.

If you want to refer to more than one element, you should use classes.

answered Apr 25, 2013 at 2:38

Andbdrew

11.9k4 gold badges35 silver badges37 bronze badges

4 Comments

Matthew Over a year ago

So what different would that make in the code? Wouldn't I get the same exact thing happening if I use classes or id.

Matthew Over a year ago

Oooh... I just reread exactly how I did it... Now I see why it is causing the thing... Durrr.... Dumbass moment by me.

Matthew Over a year ago

Thanks for the help, it is now fixed. I turn those into classes and then gave each one an id of citedx where x changes.

Matthew Over a year ago

Yeah thanks... I still can't believe I didn't catch that sooner. It made sense after I reread that and what you told me, I looked closer. I felt dumb after that... and I make that mistake a lot of times.

Collectives™ on Stack Overflow

Error in Javascript Code

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related