How to get text values when click if text are not inside html tag?

Question

There is html on the screen that looks like this.

screen:

target1 target2 target3 target4

code:

<div>
  target1
  <span>target2</span>
  <span>target3</span>
  target4
</div>

When i click on target4, I want to get the text "target4"

How do you approach it?

https://stackoverflow.com/questions/7563169/detect-which-word-has-been-clicked-on-within-a-text — mplungjan, Mar 27 '18 at 13:12

score 1 · Answer 1 · answered Mar 23 '18 at 09:09

1

you can get the value of your last text node, this is not a problem. Unfortunately :

childNodes may include text nodes, which don't support event handlers

var x = document.getElementsByTagName("div")[0];
x.addEventListener("click",function(e){
  console.log(e.currentTarget.childNodes[4].textContent)});

<div>
  target1
  <span>target2</span>
  <span>target3</span>
  target4
</div>

answered Mar 23 '18 at 09:09

scraaappy

2,830
2
19
29

he want to show target4 when click on target4 only. – Saranya Rajendran Mar 23 '18 at 09:10
When i click on target4, I want to get the text "target4" ==>this one does not solve this – Athul Nath Mar 23 '18 at 09:11
3

Read the answer. `target4` is a text node and cannot have an event listener added to it. The OP can wrap your text in a span, attach an event listener to the div and capture it with `event.target`, but with the current markup what the OP is asking is not possible. If this isn't possible this is really the only solution. – Andy Mar 23 '18 at 09:13

score 1 · Accepted Answer · answered Mar 27 '18 at 13:30

This answer both questions you had

var div = document.querySelector("div"); // get the div wrapper
div.childNodes.forEach(function(node) { // loop over the nodes
  var text = node.textContent; // get the text
  if (node.nodeName=="#text" && text.trim()!="") { // if text and not empty 
    var span = document.createElement("span"); // wrap in a span
    span.textContent = node.textContent.trim();
    node = div.replaceChild(span,node);
  }
});
div.onclick=function(e) {
  console.log(e.target.textContent); 
}

span { color:red }

<div>
  target1
  <span>target2</span>
  <span>target3</span>
  target4
</div>

awesome! I didn't know you answered here yesterday. thank you! — , Mar 28 '18 at 03:05

score 0 · Answer 3 · answered Mar 23 '18 at 10:03

scraaapy has answered your question. But if you have the control over the HTML, then just do this:

HTML

<div>
  <span>target1</span>
  <span>target2</span>
  <span>target3</span>
  <span>target4</span>
</div>

JavaScript

var el = document.querySelector("div");
  el.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

This way, your code is much easier to maintain and work with. Hope this help!

How to get text values when click if text are not inside html tag?

3 Answers3