CODEWITHSUNDEEP
javascripthtmlcss
TheBluePrint
TheBluePrint

Reputation: 23

How do I remove padding with JavaScript?

var urlmenu = document.getElementById('category');
urlmenu.onchange = function() {
  document.location.href = this.value;
};


function search_designs() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('summary-title-link'); 
    let z = document.getElementsByClassName('summary-item');
    
    for (i = 0; i < x.length; i++) {  
        if (!x[i].innerHTML.toLowerCase().includes(input)) { 
            x[i].style.display="none"; 
            z[i].style.display="none";

        } 
        else { 
            x[i].style.display="list-item";
            z[i].style.display="block";

        } 
    } 
} 
#searchbar{
  text-align: left;
  position: center;
}
.search_designs{ 
  display: list-item;
}  
<input id="searchbar" type="text" name="search" onkeyup="search_designs()" placeholder="Search..">

<select id="category" name="category">
    <option value="https://www.keslyns.com/all-designs-details">All Designs</option>
    <option value="https://www.keslyns.com/alphabet-quote-designs">Alphabet/Wording</option>
    <option value="https://www.keslyns.com/box-designs">Boxes</option>
    <option value="https://www.keslyns.com/floral-designs">Floral</option>
    <option value="https://www.keslyns.com/heart-designs">Hearts</option>
    <option value="https://www.keslyns.com/holidayseasonal-designs">Holiday/Seasonal</option>
    <option value="https://www.keslyns.com/mulitple-motif-designs">Multiple Motif</option>
    <option value="https://www.keslyns.com/new-designs">New Designs</option>
    <option value="https://www.keslyns.com/ornament-designs">Ornaments</option>
    <option value="https://www.keslyns.com/pillowpurse-designs">Pillow/Purses</option>
    <option value="https://www.keslyns.com/specialty-items-designs">Specialties</option>
    <option value="https://www.keslyns.com/symstitch-designs">Sym-Stitch</option>
</select>

For starters I have barely worked with javascripting with HTML. I am trying to create a search function that filters a list of items on a webpage. Context: The site was originally created on squarespace so some options are limited, this is why I'm using their built in code blocks to accomplish this. The downside of this is that class/ IDs are hard to find. The page in question is https://www.keslyns.com/all-designs-details.

Upvotes: 0

Views: 1676

Answers (1)

Ozgur Sar
Ozgur Sar

Reputation: 2204

You can remove padding style of an element with a code similar to this

document.getElementById("myDiv").style.padding = "0";

If there is no class or id associated with an element, then you can try to use document.querySelector() to target a specific element.

document.querySelectorAll() is used to match more than one element.

You can read more about it here

Please also note that, this code must run after the elements are loaded onto the DOM. So, it is better to add your javascript to footer section of your page.

Upvotes: 1

Related Questions