html - 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.

  & lt; Html & gt; . . . & Lt; Body & gt; & Lt; Section class = "" id = "text1" name = "text" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt; & Lt; Section class = "" id = "text2" name = "text" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt; & Lt; Section class = "" id = "text3" name = "text" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt; & Lt ;! - and so on ---------> & Lt; / Body & gt; & Lt; / Html & gt;  

The site has two simple CSS rules; For a "normal sections" and for the other "active sections"

  & lt; Style & gt; Section {margin-left: 10px; Padding: 10px; Status: Relative; Border-style: solid; Border width: 2px; Box-size: border-box; Width: 50%; Swim left; } Section.active {width: 300px; Height: 100 pixels; Background color: yellow; Box-Shadow: 10px 10px 5px # 888888; } & Lt; / Style & gt;  

is javascipt. Click Click Help in finding the clicked section. Once we are in the clicked section, its class property is set to "active", so the section is set to "active". Active CSS is implemented as such:

  Window.onload = init; Function init () {var Elems = document.getElementsByName ("texts") for (var i = 0; i  

Good yet, but here I lose hold of how do I get the code to activate only one part at a time? Right now, it actively marks many sections as they are clicked. But what I want to do, after detecting an active section, it should automatically clear the last click or active section representing "only an active section at one time". thanks a lot.

Here's another, the lounge is ^^

  init (); Function Init () {} function ADIS (test) {var Celm = test; Var classItem = document.getElementsByClassName ("active"); If (classItem.length & gt; 0) {classItem [0] .className = ""; Var name = "active"; Celm.className = Name; } Other {var name = "active"; Celm.className = Name; }}  

  section {margin-left: 10px; Padding: 10px; Status: Relative; Border-style: solid; Border width: 2px; Box-size: border-box; Width: 50%; Swim left; } Section.active {width: 300px; Height: 100 pixels; Background color: yellow; Box-Shadow: 10px 10px 5px # 888888; }  

  & lt; Section class = "" id = "text1" name = "text" onClick = "hasis (this)" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt; & Lt; Section class = "" id = "text2" name = "texts" onClick = "this (this)" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt; & Lt; Section class = "" id = "text3" name = "text" onClick = "this (this)" & gt; & Lt; P & gt; This sample lesson can be used for all purposes. / P & gt; & Lt; / Section & gt;