Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other without any gaps. My goal is to retain the bottom border for the last 3 buttons.

Below is my initial code that is not working correctly:

    var lists = document.querySelectorAll('ol');
    for (var h = 0; h < lists.length; h++) {
        var items = lists[h].querySelectorAll('li');
        for (var i = 0; i < items.length; i++) {
            var buttons = items[i].querySelectorAll('button');
            for (var j = 0; j < buttons.length; j++) {
                if (i > (buttons.length-3)) {
                    document.getElementsByTagName("button")[j].style.borderBottom = '2px solid red';
                }
            }
        }
    }
javascripthtmlcss

Answer №1

<html>
<head>
    <script>
        function removeBottomBorderExceptLastThree() {
            var lists = document.getElementsByTagName("ol");   

            for(var i = 0; i < lists.length; i++) {
                var myList = lists[i].getElementsByTagName("li");

                for(var j = 0; j < myList.length - 3; j++) {
                    var listItem = myList[j];
                    listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
                }
            }    


        }
    </script>
</head>
<body>
    <ol id="myList1">
        <li><button>1</button></li>
        <li><button>2</button></li>
        <li><button>3</button></li>
        <li><button>4</button></li>
        <li><button>5</button></li>
        <li><button>6</button></li>
        <li><button>7</button></li>
        <li><button>8</button></li>
        <li><button>9</button></li>
    </ol>

    <ol id="myList2">
        <li><button>10</button></li>
        <li><button>11</button></li>
        <li><button>12</button></li>
        <li><button>13</button></li>
        <li><button>14</button></li>
        <li><button>15</button></li>
        <li><button>16</button></li>
        <li><button>17</button></li>
        <li><button>18</button></li>
    </ol>

    <ol id="myList3">
        <li><button>19</button></li>
        <li><button>20</button></li>
        <li><button>21</button></li>
        <li><button>22</button></li>
        <li><button>23</button></li>
        <li><button>24</button></li>
        <li><button>25</button></li>
        <li><button>26</button></li>
        <li><button>27</button></li>
    </ol>

    <!-- <button onclick="removeBottomBorderExceptLastThree();">Remove</button> -->

    <script>
        removeBottomBorderExceptLastThree();
    </script>
</body>
</html>

Answer №2

Upon reviewing the code, it appears that there are various errors present which are preventing its proper functioning.

To enhance clarity and understanding of the code, I have taken the liberty to rename some variables. However, I recommend double-checking the conditional statements, particularly regarding the underlining of certain buttons as I am uncertain about your specific requirements in this regard.

// Collect all ol elements in the document and store them in allOls array
var allOls = document.querySelectorAll('ol');
for (var h = 0; h < allOls.length; h++) {

    // Retrieve all li elements within each ol element and store them in lis array
    var lis = allOls[h].querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {

        // Gather all button elements within each li element and store them in buttons array
        var buttons = lis[i].querySelectorAll('button');
        for (var j = 0; j < buttons.length; j++) {
            if (j > (buttons.length-3)) {// Verify if this condition correctly identifies the buttons requiring underline
                buttons[j].style.borderBottom = '2px solid red'; // Apply red underline to identified buttons
            }
        }
    }
}

Answer №3

Utilizing @Umit Can Cukadar's approach, I managed to get it functioning, although I believe the function's logic is somewhat redundant. I am willing to entertain any suggestions for simplification or brevity.

Here is my Solution: SCRIPT

        function removeBottomBorderExceptLast3(listName, listName2, listName3) {
        var myOl = document.getElementById(listName).getElementsByTagName("ol");
        for(var i = 0; i < myOl.length; i++) {

            var myLi = document.getElementById(listName).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
        var myOl2 = document.getElementById(listName2).getElementsByTagName("ol");
        for(var i = 0; i < myOl2.length; i++) {

            var myLi = document.getElementById(listName2).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
        var myOl3 = document.getElementById(listName3).getElementsByTagName("ol");
        for(var i = 0; i < myOl3.length; i++) {

            var myLi = document.getElementById(listName3).getElementsByTagName("li");
            for(var j = 0; j < myLi.length - 3; j++) {
                var listItem = myLi[j];
                listItem.getElementsByTagName("button")[0].style.borderBottom = "none";
            }
        }
    }

BODY

<body onload="removeBottomBorderExceptLast3('myList', 'myList2', 'myList3');">
<div id="myList">
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList2"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>
    <br />
    <br />
    <br />
    <br />
    <div id="myList3"> 
    <ol style="list-style-type:none">
        <li><div class="btn"><button>THIS IS BUTTON 1</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 2</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 3</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 4</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 5</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 6</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 7</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 8</button></div></li>
        <li><div class="btn"><button>THIS IS BUTTON 9</button></div></li>
    </ol>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

different ways to dynamically increase CSS ID in PHP

Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...

phpcss

Executing a file function from another within a module function in ReactJS

I need to utilize the functions that are defined in the apiGet.js file: export let apiGet = () => { return 'File One'; } These functions are being called in another module called brand.js. Here is the code snippet: require("../action ...

javascriptnode.jsreactjs

Ways to resolve the issue of iOS Safari showcasing 'a' tag styling differently compared to other browsers

Here's a simple question for you. Take a look at the images below for reference. Check out the iOS Safari browser on my phone https://i.sstatic.net/o9jOe.jpg and compare it to my desktop browser, both screenshots were taken live from the server. ...

htmlcssiossafari

Using Paper Checkbox to Toggle the Visibility of a Div in Polymer

Having experience with Meteor, I typically used JQuery to toggle the display of a div along with paper-checkbox: HTML: <paper-checkbox name="remoteLocation" id="remote-chk" checked>Remote Location</paper-checkbox> <div id="autoUpdate" clas ...

javascriptjqueryhtmlpolymerpolymer-1.0

I am having trouble placing the button within the image

Essentially, my goal is to place the button within the image and ensure it remains in its position when transitioning to mobile mode or adjusting window size. This is the desired outcome: https://example.com/image https://example.com/button-image .img ...

htmlcss

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Seeking assistance as I am currently facing a problem where I need to loop through JSON data and add it as markers on Google Maps, but unfortunately, it only returns null value. Is there a way to automatically connect this to JSON? My plan is to have a Gr ...

javascriptjqueryjsongoogle-maps-api-3

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

Tips for setting a default value in a Reactive Form

How can I transfer a default value from HTML to TypeScript using reactive forms? <ul class="list list_2"> <li>Subtotal <span>{{cartTotal | currency:'INR':true:'2.0'}}</span></li> <li>Shippin ...

htmlangularangular8angular-reactive-formsdefault-value

Using .htaccess file to optimize SEO crawling for single page applications that do not use hashbangs

When using a page with pushState enabled, the typical method of redirecting SEO bots involves utilizing the escaped_fragment convention. More information on this can be found here. This convention operates under the assumption that a hashbang prefix (#!) ...

javascript.htaccessweb-crawlersingle-page-application

Tips for finishing a row of images using CSS3

Here is the code snippet that I am currently working with: <div id="images" class="img"/> <img src="spiderman.png" alt=""/> <img src="superman.png" alt="" height="25%" width="25%"/> <img src="batman.png" alt="" /> </div> ...

javascripthtmlcss

Creating Vue components and including Javascript code within them

Attempting to develop a component using Vue for my JavaScript code, but encountering issues. My primary aim is to build a component with either Vue or Vue3 <head> <title></title> <script src="https://cdn.jsdelivr ...

javascriptvue.jsvuejs3

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

javascriptjquerycsslightboxcss-position

The ReactJS component is unable to resolve the specified domain name

Whenever I utilize a component like const React = require('react'); const dns = require('dns'); class DnsResolver extends React.Component { componentDidMount() { dns.resolve('https://www.google.com', (err, addres ...

javascriptreactjs

The JavaScript popup is not functioning properly when using a comparison operator

There are 5 links with mini preview photos and URLs. Out of the 3 links, two are considered good while the other two are not. Clicking on a good link takes me to a new page, but clicking on an error link changes the href attribute to addressError, triggeri ...

javascriptjquery

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

Step by step guide on integrating ReactJS into your current node.js backend application

I am currently working on a basic node.js API Setup: | project-name | public | index.html | ... some static js/css | app.js | package.json app.js var express = require('express'), bodyParser = require('body-parser'), ...

javascriptnode.jsreactjsexpress

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api

bot.sendDocument(id, 'test.zip'); I am facing an issue while trying to send a 1.5GB file using the code above. Instead of being delivered to the user, I receive the following error message: (Unhandled rejection Error: ETELEGRAM: 413 Request En ...

javascriptnode.jstelegramtelegram-botnode-telegram-bot-api

Ways to access the content of the chosen <td> element using Vue?

I have a dynamic table where I retrieve data using $.ajax() from a database. The content in the rows is editable, and I need to save the changes made with vue.js. After updating the content, an $.ajax() function with 4 parameters (name, client_id, url, and ...

javascriptjqueryhtmlvue.js

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

The component's width appears to be constrained by the use of display flex

I am currently working on a reactjs application that includes a header and another component. Initially, everything looks fine, but when I apply display: flex to their div, it seems to reduce the width of the header. Here are some images showing the issue: ...

cssreactjsflexbox