1

i would like to add a button that will Select / unselect the text inside a div on Click using javascript ..

in example one click will select the text, next click will deselect the text and so on.

Adam Wagner
  • 15,469
  • 7
  • 52
  • 66
jscriptanfänger
  • 13
  • 1
  • 5

2 Answers2

0

Here is one way to do it from this post also a question here as well.

If you want to select/deselect you can simply adjust your click handler to the following:

<span rel="theDiv">select text of div</span>
<div id="theDiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</div>

$('span').click(function() {
    var targetDiv = $(this).toggleClass("selected").attr("rel");
    if($(this).hasClass("selected")){
        SelectText(targetDiv);
    }
});

Example of it on jsfiddle.

Community
  • 1
  • 1
Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • hey mark .. it works on selecting, but it wont UNSELECT the text if i click again on the div .. My problem is i need to TOGGLE the text selection on click...if it is selected i want to unselect it, if it is unselected i want to select it .. – jscriptanfänger Feb 20 '11 at 14:47
  • Set a flag (make it global) if is set select if is unset deselect... the script works... just add the flag. – zozo Feb 20 '11 at 15:32
0

I did like this:

HTML:

 <div id="div-configure-buttons-wrapper">
   <button type="button" id="grid-config-button-1" class="grid-configure-buttons" active=false>1x</button>
   <button type="button" id="grid-config-button-2" class="grid-configure-buttons" active=false>2x</button>
   <button type="button" id="grid-config-button-3" class="grid-configure-buttons" active=false>4x</button>
   <button type="button" id="grid-config-button-4" class="grid-configure-buttons" active=false>6x</button>
   <button type="button" id="grid-config-button-5" class="grid-configure-buttons" active=false>8x</button>
</div>

JS:

const setOfBtn = document.querySelectorAll('.div-configure-buttons');  //Div with 5 buttons, but it can have as many as you want

setOfBtn.forEach(val => {      // "val" is each button found in setOfBtn
   val.addEventListener('click', () => {
   switchActive()             // calls a function to set "false" in "active" property of all buttons.
   val.active = !val.active   //now, with all buttons set as "false", the clicked button will be the only one with "true"
   isBtnActive(val)           // set backgroundColors for the "true"/selected button
   console.log(val.active);
      });

function switchActive(){
    setOfBtn.forEach(val => {
      if(val.active === true){
        val.active = false
        isBtnActive(val)
        console.log(val)
      }
    })
}


function isBtnActive(val){     // just setting a backgroundColor for the "true"/selected button and removing the backgroundColor of the previous selected button
      if(val.active){
        document.getElementById(val.id).style.backgroundColor = 'blue'
        val.setAttribute('active', val.active)   
        console.log(val);                     
      }else{
         document.getElementById(val.id).style.backgroundColor = 'white'
         val.setAttribute('active', val.active)
      } 
    }
Wagner Ortiz
  • 1
  • 1