Why javascript Event.target is not working

Question

I'm doing a drawing Web Application where I can draw Polyline, BezierCurves, Polygons etc.

My problem is:

I'm assigning every created Element a unique ID. For Example: first Element gets the ID => 0, the second => 1, third => 2 .......

But the User should have the possibility to change the ID of every Element by clicking the target element and insert a Number in the input field.

I'm using e.target to get the clicked element and e.target.parentElement to get the parent and the ID.

But when the input-Event is fired e.target is always the same. It references to the first Element clicked and not to the actual target Element. So I'm always editing the ID of the first Element clicked.

What am I doing wrong?

Here is the Code for testing:

HTML

<html>
    <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.getElementById("path");
svgHolder.addEventListener("click", selectElement, false);

function selectElement(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);
  }
  //event listener, fired when the value of the input field changes
  input.addEventListener('input', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    //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;
}

Possible duplicate? [event.target vs event.currentTarget](https://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget) — Jared Smith, Dec 13 '18 at 14:47

score 0 · Answer 1 · answered Dec 13 '18 at 15:04

0

Try to add inline listener and pass event to this in html tag:

<g id="path" onclick="selectElement(event)">

answered Dec 13 '18 at 15:04

eerFun

145
8

Okay thanks, but it does not work. It still refers to the first Element clicked. – Patsch Dec 13 '18 at 15:30
exactly which element do you want to refers? normally `e.target` refers to elements that has `onclick` attribute. – eerFun Dec 13 '18 at 15:41
Try to change the ID of one Polyline by clicking it and inserting a number in the Input Field and then try to change the ID of the other Polyline the same way. After that you should see that its not possible to change the ID of the second Polyline, because it changes the ID of the first Element again instead of the one clicked – Patsch Dec 13 '18 at 15:56

Why javascript Event.target is not working

Here is the Code for testing:

1 Answers1