CODEWITHSUNDEEP
javascripthtmlcssdom
pyari
pyari

Reputation: 11

How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

say, I have an HTML site with multiple sections.

<html>
 .
 .
 .
<body>

<section class="" id="text1" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>
  <!-- and so on --------->
</body>
</html>

the site has two simple css rules; one for "normal sections" and other for "active sections".

<style>
section {
    margin-left: 10px;
    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 2px;

     box-sizing: border-box;
    width: 50%;
    float: left;
 }

section.active {
 width: 300px;
 height: 100px;
 background-color: yellow;
 box-shadow: 10px 10px 5px #888888;
}
</style>

javascipt's .onclick property helps locate the clicked section. once we have the clicked section, its class property is set to "active" so the section.active CSS gets to apply like this:

Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts")
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
    Celm.className= name;
}
};

so far so good, but here I lose the grip. how do I get the code to mark only one section active at one time? right now, it keeps marking multiple sections active as they are clicked. but what I want do to do is, once an active section is detected, it should automatically clear off the last clicked or active section, representing "only one active section at one time". many thanks.

Upvotes: 0

Views: 1412

Answers (7)

rst
rst

Reputation: 2714

By using jQuery look at the following functions http://api.jquery.com/removeclass/

and http://api.jquery.com/addClass/

and last but not least http://api.jquery.com/toggleClass/

Regards R

Upvotes: 0

Anders Anderson
Anders Anderson

Reputation: 433

Here is another One, have fun ^^

init();
function init() {

}

function dothis(test) {
    var Celm = test;    
    var classItem = document.getElementsByClassName("active");
    if (classItem.length > 0){        
        classItem[0].className = "";
        var name = "active";
        Celm.className= name;
    }else{        
        var name = "active";
        Celm.className= name;
    }
}
section {
    margin-left: 10px;
    padding: 10px;
    position: relative;
    border-style: solid;
    border-width: 2px;

     box-sizing: border-box;
    width: 50%;
    float: left;
 }

section.active {
 width: 300px;
 height: 100px;
 background-color: yellow;
 box-shadow: 10px 10px 5px #888888;
}
<section class="" id="text1" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text2" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

<section class="" id="text3" name="texts" onClick="dothis(this)">
<p> this is sample text yaday ayda yaday yada blah blah blah </p>
</section>

Upvotes: 0

Tiger
Tiger

Reputation: 91

function dothis(eventObj) {

var x = document.getElementsByClassName("active");    
for (var i = 0; i < x.length; i++) {    
    x[i].className = "";    
}


var Celm = eventObj.target;
var name = "active";
Celm.className= name;

}

Upvotes: 0

sinisake
sinisake

Reputation: 11328

http://jsfiddle.net/nL0kau9u/1/

function dothis(eventObj) {
    var Celm = eventObj.target;
    var name = "active";
   for (var i = 0; i<Elems.length; i++) {
       if(Elems[i]!=Celm) {
           Elems[i].className='';
       }
       else {
           Elems[i].className=name;
       }
};

}
};

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

try this 

$(function(){

 $('section').on('Click',function(){
  $('section.active').removeClass('active');
  $(this).addClass('active');

  });

})

and you can download jquery from jquery.com and here the documentation

Upvotes: 0

Yameen
Yameen

Reputation: 585

Inorder to have "Active" class on only one element, you have to remove the "active" class for previously selected element with class "Active".

If you want to do it using jQuery, you can simply write the below code.

$('.Active').removeClass('Active');

Using Javascript:

Well, there is no inbuilt method to remove class using javascript. You have can write a custom function "removeClass" as shown below and directly call it like this: removeClass('Active');

function removeClass(className) {
    // convert the result to an Array object
    var els = Array.prototype.slice.call(
        document.getElementsByClassName(className)
    );
    for (var i = 0, l = els.length; i < l; i++) {
        var el = els[i];
        el.className = el.className.replace(
            new RegExp('(^|\\s+)' + className + '(\\s+|$)', 'g'),
            '$1'
        );
    }
}

Upvotes: 2

Pugazh
Pugazh

Reputation: 9561

Remove the className active from all the sections and set the active class only for required section.

Window.onload = init;
function init() {
var Elems = document.getElementsByName("texts");
for (var i = 0; i<Elems.length; i++) {
    Elems[i].onclick = dothis;
};

function dothis(eventObj) {    
    var Celm = eventObj.target;
    var name = "active";
    var Elems = document.getElementsByName("texts");

    // This will remove the className active from all sections
    Elems.className = Elems.className.replace( /(?:^|\s)active(?!\S)/ , '' );

    // Once all active sections are cleared, this selects the required section
    Celm.className= name;
}
};

Upvotes: 0

Related Questions