i want to change the class of the element when i click on an icon

1. i click
2. if the curent class is 'text_area_box' then remove it and add the 'text_area_box_active'
3. i tested the if(element.classList.contains('text_area_box')) and got true as a result so that means the condition work perfectly... js code is bellow.
4. Now replacing the classes should work but there is no result on the html page

The problem is on the javascript code where the condition work perfectly but the page does not change

here is my code:

function update_function() {
var element = document.getElementById("text_area_box");

if(element.classList.contains('text_area_box'))  /*the condition works perfectly*/
 {

   element.classList.remove('text_area_box');
   element.classList.add('text_area_box_active');
   
 }
else{

   element.classList.remove('text_area_box_active');
   element.classList.add('text_area_box');
}
 
}

.text_area_box_active{
    position: relative;
  }
  .text_area_box {
    position: relative;
    display: none;
  }

<div >
    <i  id="update_pen"  onclick="update_function()"></i> <--- the button
    <div  id="swiper-slide-one">
        <div >
            <div  id="text_area_box"> <--- the class to change
                <input type="text" name="" required="">
                <label>Titre</label>
            </div>        
        </div>
    </div>
</div>

sorry if there is any lack of explanation.

CodePudding user response：

It's working fine, your button was empty, so no click to call the function.

  function update_function() {
    var element = document.getElementById("text_area_box");
    
    if(element.classList.contains('text_area_box'))  /*the condition works perfectly*/
     {
    
       element.classList.remove('text_area_box');
       element.classList.add('text_area_box_active');
       
     }
    else{
    
       element.classList.remove('text_area_box_active');
       element.classList.add('text_area_box');
    }
     
    }
    

.text_area_box_active{
        position: relative;
      }
      .text_area_box {
        position: relative;
        display: none;
        font-size: xx-large;
        color: red;
      }

    <div >
        <i  id="update_pen"  onclick="update_function()">button</i> <--- the button
        <div  id="swiper-slide-one">
            <div >
                <div  id="text_area_box"> <--- the class to change
                    <input type="text" name="" required="">
                    <label>Titre</label>
                </div>        
            </div>
        </div>
    </div>

CodePudding user response：

It seems like that <i id="update_pen" onclick="update_function()"></i> has no value inside it.

And the function name given is update_function() which doesn't exsist on your given code.

Please change your function name from update_function() to replace_function().

And put some text inside tag.

example: <i id="update_pen" onclick="replace_function()"> <---the button </i>

Edit: After you have change your function name from replace_function() to update_function() wrap <i id="update_pen"> <---the button </i> inside button.

Example <button onclick="update_function()"><i id="update_pen">click Me</i></button>

css button: {z-index: 1;}

CodePudding user response：

I actualy was doing it all correctly but one small thing that i did not understend yet was causing the problem:

-When i changed document.getElementById('') to document.querySelector('') it worked fine.

javascript:

  function update_function() {
    var element = document.querySelector(".text_area_box"); // instead of getElementById
    
    if(element.classList.contains('text_area_box'))  /*the condition works perfectly*/
     {
    
       element.classList.remove('text_area_box');
       element.classList.add('text_area_box_active');
       
     }
    else{
    
       element.classList.remove('text_area_box_active');
       element.classList.add('text_area_box');
    }
     
    }