title: Why is event.currentTarget null and e.target always the same?
body: <p>I am curious why is <strong>e.currenTarget</strong> null within the Input Event.listener and <strong>e.target</strong> always the first Element clicked?</p>
  
  <p>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, <strong>e.target</strong> always refers to the first Element clicked.</p>
  
  <p>How can I avoid this? Any Workarounds?</p>
  
  <p><strong>Code for testing</strong></p>
  
  <p><strong>HTML</strong>
    </p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="form-group"&gt;
    &lt;input type="number" class="form-control" id="attributeID" placeholder="0" min="0" max="1000" step="1" value=""&gt;
    &lt;/div&gt;
    &lt;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"&gt;
      &lt;g id="g2"&gt;&lt;/g&gt;
      &lt;rect width="1587" height="580" id="rect1" style="fill: none; pointer-events: all;"&gt;&lt;/rect&gt;
       &lt;g id="gElement" &gt;&lt;/g&gt;
       &lt;g id="path"&gt;
         &lt;g class="polyline" id="0" value="line"&gt;
            &lt;polyline points="322.99999999999994,239,393.99999999999994,142.00000000000006" id="pathPoints0" fill="none" stroke="#186AA9" stroke-width="4"&gt;&lt;/polyline&gt;
               &lt;circle cx="322.99999999999994" cy="239" r="2"&gt;&lt;/circle&gt;
               &lt;circle cx="393.99999999999994" cy="142.00000000000006" r="2"&gt;&lt;/circle&gt;
         &lt;/g&gt;
         &lt;g class="polyline" id="1" value="line"&gt;
            &lt;polyline points="560,241.00000000000006,577.9999999999999,163" id="pathPoints1" fill="none" stroke="#186AA9" stroke-width="4"&gt;&lt;/polyline&gt;
               &lt;circle cx="560" cy="241.00000000000006" r="2"&gt;&lt;/circle&gt;
               &lt;circle cx="577.9999999999999" cy="163" r="2"&gt;&lt;/circle&gt;
        &lt;/g&gt;
     &lt;/g&gt;
   &lt;/svg&gt;
  &lt;script src="test.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>//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;
  }
  </code></pre>
  
  <p><strong>EDIT/SOLUTION</strong>
  OK I could fix it.</p>
  
  <pre><code>var input = document.getElementById("attributeID");
  
          input.onchange = function(event){
  
          event.preventDefault();
          event.stopImmediatePropagation();
  
          target.parentElement.setAttribute("id",input.value);
  
      };
  </code></pre>
  
  <p>onchange made it. I think that if I attach events like this, it will overwrites the old event.</p>