HTML - List within a list - Indexing a button press

user_6287692 0
Viewed 111

I am trying to identify a button press in JavaScript that is coming from a list within a list.

In basic terms I am thinking of it like a 2x2 table - e.g. if the top-right button is pressed it's index should be 0-1. If bottom-right is pressed it's index should be 1-1. If top-left is pressed index should be 0-0, bottom left 1-0 etc.

The child lists make up the parent list's rows, and are comprised of a series of pre-defined templates. Each child list's ID is generated using the index id of the parent list.

I'd like to know best practice for this. I am using Crestron's ch5 library but am hoping I can apply generic principles to my problem.

I have simplified the HTML:

<template id="template-0">
    <button id="post-1">Item 1</button>
</template>

<template id="template-1">
    <button id="post-2">Item 2</button>
</template>

<ch5-list 
    class="verticalList"   
    size="2"
    indexid="idy"
    id="parent-list"
    orientation="vertical">
    
    <template>
        
        <ch5-list 
            class="horizontalList"
            id="child-list{{idy}}"
            size="2"
            indexid="idx"
            orientation="horizontal">

            <template>
                <ch5-template templateid="template-{{idx}}">

                </ch5-template>
            </template>
                
        </ch5-list>
    </template>    
</ch5-list>

I am new to HTML so apologies if this is a stupid question.

Any help would be much appreciated! Thank you

list html javascript
1 Answers

Accessing elements in your HTML can be done with several DOM methods: getElementById, getElementsByTagName, getElementsByClassName, and querySelectorAll.

NOTE: In all of the methods which return a collection of resulting elements, the elements will be sorted in the order which they appear on the page (in the HTML), so the button order would be as follows:

let order = [
     "top-left button", "top-right button",
  "bottom-left button", "bottom-right button"
];

getElementById

If the resulting button elements from the template are placed, they'll just have id values of post-1 for template-0 and post-2 for template-1. With two columns and two rows of buttons, this means that there will only be two unique IDs between four buttons, so selecting elements this way may not work well. The HTML code could probably be modified to be sure that the buttons have unique ID attributes. If that problem can be solved, the following code will select one button at a time:

let buttonElement = document.getElementById("post-1");
// or if ID can be resolved to be post-0-1:
let firstButtonElement = document.getElementById("post-0-1");

getElementsByTagName

Using this method would work fine as it will return a list of button elements as an HTMLCollection. It may return other buttons on the page, but it's a minor inconvenience that can be handled.

let buttonsCollection = document.getElementsByTagName("button");

getElementsByClassName

If you use a class for the buttons instead of IDs, the buttons can all be assigned to the same class and this is one of the ways it will select all of the buttons as intended and none of the buttons you didn't intend.

<template id="template-0">
    <button id="post-1" class="postButtons">Item 1</button>
</template>

<template id="template-1">
    <button id="post-2" class="postButtons">Item 2</button>
</template>

let postButtons = document.getElementsByClassName("postButtons");
console.log(postButtons);

querySelectorAll

This method combines multiple selection types into one (using CSS selectors):

Description Method call
Tag names document.querySelectorAll("button");
Class names document.querySelectorAll(".postButtons");
Id document.querySelectorAll("#post-1");

Since you can use CSS Selectors, you could select buttons with id values that start with post- like so:

let postButtons = document.querySelectorAll("button[id^=post-]");

I'm not entirely sure how the elements will be created as for the CH5 library, but these steps provided above should help you get started.

Code Snippet showing all of the above examples in one:

let buttonElementPostOne = document.getElementById('post-1');
console.log("getElementById:".padStart(23, " "), buttonElementPostOne);
let buttonsCollection = document.getElementsByTagName('button');
console.log("getElementsByTagName:".padStart(23, " "), buttonsCollection[0]);
let postButtons = document.getElementsByClassName('postButtons');
console.log("getElementsByClassName:".padStart(23, " "), postButtons[0]);
let postButtonsQueried = document.querySelectorAll('button[id^=post-');
console.log("querySelectorAll:".padStart(23, " "), postButtonsQueried[0]);
<div>
  <button id="post-1" class="postButtons">post-1</button>
  <button id="post-2" class="postButtons">post-2</button>
</div>
<div>
  <button id="post-3" class="postButtons">post-3</button>
  <button id="post-4" class="postButtons">post-4</button>
</div>

user_75038870
Related