I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on?
Here is what I have attempted:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
if (classie.has(input, 'open'))
classie.remove(input, 'open')
else
classie.add(input, 'open');
console.log('I am back')
});.search-bar {
position: absolute;
top: 30px;
right: 60px;
width: 300px;
height: 40px;
overflow: hidden;
}
.sb-label {
position: absolute;
right: 0px;
display: block;
width: 50px;
height: 40px;
background-color: #32ab32;
text-align: center;
z-index: 10;
cursor: pointer;
}
.sb-label img {
display: block;
z-index: 30;
cursor: pointer;
}
.sb-input {
position: absolute;
right: 0px;
width: 50px;
height: 40px;
border: none;
backface-visibility: hidden;
transition: left 0.7s;
z-index: 5;
}
.sb-input .open {
z-index: 90;
}
.sb-input .open {
width: 100%;
transition: left 0.7s;
}<div class="search-bar">
<form>
<label class="sb-label" id="sb-label">
<img src="search-icon01.png" width="35px" height="35px">
</label>
<input type="search" class="sb-input" id="sb-input" placeholder="Enter Search Word">
</form>
</div>By adding a callback and checking my console, I received confirmation that the function was executed properly. Further, altering the code demonstrated success:
var input = document.querySelector('.sb-input');
var image = document.querySelector('.sb-label img');
image.addEventListener('click', function() {
input.style.zIndex = 90;
input.style.width = '100%';
console.log('I did it')
});
Seemingly, the issue lies within my stylesheet. Can anyone assist me in rectifying this inconsistency?