I am curious why is e.currenTarget null within the Input Event.listener and e.target always the first Element clicked?
I am trying to change the ID of each Polyline by clicking and then inserting a number in the input field. But if I want to change the ID of the second Element after i changed the first, e.target always refers to the first Element clicked.
How can I avoid this? Any Workarounds?
Code for testing
HTML
<html> <head> </head> <body> <div class="form-group"> <input type="number" class="form-control" id="attributeID" placeholder="0" min="0" max="1000" step="1" value=""> </div> <svg id="svgDraw" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1587" height="580"> <g id="g2"></g> <rect width="1587" height="580" id="rect1" style="fill: none; pointer-events: all;"></rect> <g id="gElement" ></g> <g id="path"> <g class="polyline" id="0" value="line"> <polyline points="322.99999999999994,239,393.99999999999994,142.00000000000006" id="pathPoints0" fill="none" stroke="#186AA9" stroke-width="4"></polyline> <circle cx="322.99999999999994" cy="239" r="2"></circle> <circle cx="393.99999999999994" cy="142.00000000000006" r="2"></circle> </g> <g class="polyline" id="1" value="line"> <polyline points="560,241.00000000000006,577.9999999999999,163" id="pathPoints1" fill="none" stroke="#186AA9" stroke-width="4"></polyline> <circle cx="560" cy="241.00000000000006" r="2"></circle> <circle cx="577.9999999999999" cy="163" r="2"></circle> </g> </g> </svg> <script src="test.js"></script> </body> </html> JS
//Event-Listener, fired when clicked on a line var svgHolder = document.querySelectorAll("polyline"); svgHolder.forEach(function(elem){ elem.addEventListener("click",function(e){ e.stopImmediatePropagation(); e.preventDefault(); console.log(e.target.parentElement); var input = document.getElementById("attributeID"); //colorize the clicked element and call getAttribute Function if (e.target.nodeName == "polyline") { e.target.setAttribute("stroke", "#E9203B"); getAttributes(e); } else if (e.target.nodeName == "polygon") { e.target.setAttribute("stroke", "#E9293B"); getAttributes(e); } else if (e.target.nodeName == "path") { e.target.setAttribute("stroke", "#E9293B"); getAttributes(e); } console.log(e.currentTarget); console.log(e.target); //event listener, fired when the value of the input field changes input.addEventListener('input', function (event) { event.preventDefault(); event.stopImmediatePropagation(); console.log(e.currentTarget); console.log(e.target); //here the e.target is not changing and always refers to the first element clicked e.target.parentElement.setAttribute("id", input.value); }, false); var c = document.getElementById("rect1"); c.addEventListener("click", function () { if (e.target.nodeName == "polyline") { e.target.setAttribute("stroke", "#186AA9"); } else if (e.target.nodeName == "polygon") { e.target.setAttribute("stroke", "none"); } else if (e.target.nodeName == "path") { e.target.setAttribute("stroke", "grey"); } }); }); }); //set the value of the input field function getAttributes(element) { var id = element.target.parentElement.getAttribute("id"); document.getElementById("attributeID").value = id; } EDIT/SOLUTION OK I could fix it.
var input = document.getElementById("attributeID"); input.onchange = function(event){ event.preventDefault(); event.stopImmediatePropagation(); target.parentElement.setAttribute("id",input.value); }; onchange made it. I think that if I attach events like this, it will overwrites the old event.
e.currentTargetproperty of the event object changes while propagating