Desired Outcome for my Javascript:
I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition()' should consistently run as long as the div is still present, updating and displaying its x and y positions in a textfield placeholder.
$("#canvas").append('<div onmouseover="getPosition(this.id);" style="top:'+initXYpos+'px; left:'+initXYpos+'px;">Button '+index+'</div>');
The Issue at Hand:
Even after deleting the div containing "getPosition(this.id)", the function continues to execute, causing the following error: "TypeError: null is not an object (evaluating 'document.getElementById(x).style')"
I simply want the function to cease operation upon removal of the div.
This is the functionality of getPosition(x):
function getPosition(x){
$('#canvas_container').mouseover(function(){
timer = setInterval(function() {
var xPos = document.getElementById(x).style.left;
var yPos = document.getElementById(x).style.top;
document.getElementById(x+'_fieldX').placeholder = xPos;
document.getElementById(x+'_fieldY').placeholder = yPos;
}, 10); }
Note:
I apologize if this appears to be a simple mistake on my part. I am fairly new to Javascript and would appreciate any assistance you could provide. Thank you for your understanding and willingness to help.