Question

I’m trying to set up a script that will search for multiple keywords and then draw a line to connect them with canvas. But I’ve run into an issue where it starts to draw the second line but it uses some of the x y outputs of the previous line.

Here’s what I have:
http://jsfiddle.net/LCfqj/

Any Help would be greatly appreciated!

Answer 1

Since you search and replace each term using the same class (“word”) it has an additive effect. Instead of using the same class for each term, use something unique each time. “word1″,”word2” or word plus the search term.

I’ve added an alert that shows this in practice:

http://jsfiddle.net/A4rPQ/

You will see that each time you search for a term you will get 2 additional results from $(“.word”).length.

Also keep in mind that if the search term naturally exists more than once, you will need to draw additional lines, so your approach will need rethinking. One way is that your findElement method returns an array of all of the lineInfo required to connect all of the points.