3

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.

Patsch
  • 71
  • 1
  • 2
  • 11
  • Because the `e.currentTarget` property of the event object changes while propagating – Bergi Dec 17 '18 at 08:59
  • "*How can I avoid this?*" - by storing the reference to the element in a local variable, instead of having your event listeners use the old click event. – Bergi Dec 17 '18 at 09:03
  • ok I changed my JS. I am storing the reference in local variable, but it still not possible to change the ID of both elements, because within the input Listener its somehow changing. – Patsch Dec 17 '18 at 09:59
  • https://jsfiddle.net/w4pbxL20/ – Patsch Dec 17 '18 at 10:00
  • Btw, you probably should not install any event handlers (that you never remove) inside of an other event handler, as they will accumulate. – Bergi Dec 17 '18 at 10:00

0 Answers0