CODEWITHSUNDEEP
javascripthtmlcssonclickdom-events
user6336941
user6336941

Reputation: 39

Select All Text in Div Tag (That's Uses Classes) When It's Clicked

There're many solutions on the Net to do this where each div tag has a unique id (e.g.: Select all DIV text with single mouse click), but how am I able to do this for more than one div tag on the same page that use the same class?

The code would look something like this:

<td>
    <div class="code" onclick="">int variable_name;</div>
    <div class="code" onclick="">int variable_name = value;</div>
    <div class="code" onclick="">float variable_name;</div>
    <div class="code" onclick="">float variable_name = value;</div>
    <!-- etc... -->
</td>

Plain Javascript is preferred for the solution.

Upvotes: 0

Views: 2282

Answers (3)

Suresh Karia
Suresh Karia

Reputation: 18238

In your case you can do this way:

getText = function(td) {
  var t = td.innerText || td.textContent;
  alert(t);
}
<table>
  <tr>
    <td>
      <div class="code" onclick="getText(this)">int variable_name;</div>
      <div class="code" onclick="getText(this)">int variable_name = value;</div>
      <div class="code" onclick="getText(this)">float variable_name;</div>
      <div class="code" onclick="getText(this)">float variable_name = value;</div>
    </td>
    <tr>
</table>

or the better way would be:

var c = document.getElementsByClassName('code');

for (var i = 0; i < c.length; i++) {
  c[i].onclick = function(c) {
    alert(c.innerText);
  }
}
<table>
  <tr>
    <td>
      <div class="code">int variable_name;</div>
      <div class="code">int variable_name = value;</div>
      <div class="code">float variable_name;</div>
      <div class="code">float variable_name = value;</div>
      <!-- etc... -->
    </td>
  </tr>
</table>

Upvotes: 1

CoursesWeb
CoursesWeb

Reputation: 4237

You can use querySelectorAll() to get all those elements, then, with addEventListener() register click to each element to call the selectElmCnt() function from this code:

<div>
  <div class="code">int variable_name;</div>
  <div class="code">int variable_name = value;</div>
  <div class="code">float variable_name;</div>
  <div class="code">float variable_name = value;</div>
  <!-- etc... -->
</div>
<script>
// selects the content of an element. Receives the object with that element
function selectElmCnt(elm) {
  // for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
  }
  else if(window.getSelection) {
    // other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

var ecode = document.querySelectorAll('.code');
for(var i=0; i<ecode.length; i++){
  ecode[i].addEventListener('click', function(e){
    selectElmCnt(e.target);
  });
}
</script>

Upvotes: 0

Falle1234
Falle1234

Reputation: 5063

You could do something like this:

 function getData(element)
{
   if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }

}
<html>
    <head>

    </head>
    <body>
        <td>
            <div class="code" onclick="getData(this)">int variable_name;</div>
            <div class="code" onclick="getData(this)">int variable_name = value;</div>
            <div class="code" onclick="getData(this)">float variable_name;</div>
            <div class="code" onclick="getData(this)">float variable_name = value;</div>
            <!-- etc... -->
        </td>
    </body>
</html>

Upvotes: 1

Related Questions