Menu
I am trying to get the index of something I click. How can I do that?
This is what I tried
[code]
dots.forEach(dot =>
dot.addEventListener(“click”, e => {
const findIndex = e.target.index;
console.log(findIndex);
counter = findIndex;
sections.forEach((section, index) => {
if (counter === index) {
toggleText(index, “show”);
updateDot(index, “activeDot”);
section.scrollIntoView({ behavior: “smooth” });
}
});
})
);
Also this is the project:
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Position Picker </title>
<!-- Modified from: https://javascriptsource.com/getposition-2/ -->
<style>
.ptr { cursor:hand; cursor:pointer; }
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
}
th {
border: 1px solid black;
text-align: center;
padding: 2px;
width: 5em;
}
th:hover { background: lime; }
td {
border: 1px solid black;
text-align: right;
padding: 2px;
}
td:hover { background: orange; }
tr:nth-child(even){background-color: #d2d2d2; } /* for table stripes */
#fs1, #fs3 { width: 25%; float: left; }
#fs2 { width: 60%; }
</style>
</head>
<body>
<fieldset id='fs2'> <legend>Image positions</legend>
<div>
<p>Click on a graphic below (these are in a different container from the ones above):</p>
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix1-sm-1.gif' onClick="showImagePick(this)" />
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix2-sm-3.gif' onClick="showImagePick(this)" />
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix3-sm-1.gif' onClick="showImagePick(this)" />
<br><input id="imgNo" value="" size="30em">
</div>
</fieldset>
<fieldset id='fs1'> <legend>List positions</legend>
<p>Click on a list item below:</p>
<ol>
<li onClick="showListPick(this)" class="ptr">This is an ordered list.</li>
<li onClick="showListPick(this)" class="ptr">Click on any item in the list.</li>
<li onClick="showListPick(this)" class="ptr">JavaScript can get its position!</li>
<li onClick="showListPick(this)" class="ptr">Very useful for dynamic lists.</li>
</ol>
<input id="lstNo" value="">
</fieldset>
<!-- Original version
<p>Click on a list item below:</p>
<ol>
<li onClick="showLstPick('Item '+GetPosition(this.parentNode,this))" class="ptr">This is an ordered list.</li>
<li onClick="showLstPick('Item '+GetPosition(this.parentNode,this))" class="ptr">Click on any item in the list.</li>
<li onClick="showLstPick('Item '+GetPosition(this.parentNode,this))" class="ptr">JavaScript can get its position!</li>
<li onClick="showLstPick('Item '+GetPosition(this.parentNode,this))" class="ptr">Very useful for dynamic lists.</li>
</ol>
<div>
<p>Click on a graphic below (these are in a different container from the ones above):</p>
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix1-sm-1.gif'
onClick="showImgPick('Image number '+GetPosition(this.parentNode,this)+' in its box.')" />
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix2-sm-3.gif'
onClick="showImgPick('Image number '+GetPosition(this.parentNode,this)+' in its box.')" />
<img src='https://javascriptsource.com/wp-content/uploads/2018/01/pix3-sm-1.gif'
onClick="showImgPick('Image number '+GetPosition(this.parentNode,this)+' in its box.')" />
<br><input id="imgNo" value="" size="30em">
</div>
// end of Original version
-->
<fieldset id='fs3'> <legend>Table positions</legend>
<p>Click on a table body cell below:</p>
<table>
<caption> Table </caption>
<thead>
<tr>
<th> Column 1 </th> <th> Column 2 </th> <th> Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> R1:C1 </td> <td> R1:C2 </td> <td> R1:C3 </td>
</tr>
<tr>
<td> R2:C1 </td> <td> R2:C2 </td> <td> R2:C3 </td>
</tr>
<tr>
<td> R3:C1 </td> <td> R3:C2 </td> <td> R3:C3 </td>
</tr>
</tbody>
</table>
<input id="cellNo" value="" size="40em">
<script>
const doc = (IDS) => document.getElementById(IDS);
function showListPick(info) {
const str = 'Item '+GetPosition(info.parentNode,info);
doc('lstNo').value = str;
}
function showImagePick(info) {
const str = 'Image number '+GetPosition(info.parentNode,info);
doc('imgNo').value = str;
}
// Original version
// function showLstPick(info) { doc('lstNo').value = info; }
// function showImgPick(info) { doc('imgNo').value = info; }
/*
Syntax: GetPosition(main,spec)
Arguments:
main: the containing element to search
spec: the element whose position to return
Returns: The position of the given element within the given container,
relative to other elements of the same type
(0=first, -1=spec not found in main).
*/
function GetPosition(main,spec) {
items=main.getElementsByTagName(spec.tagName);
found=0;
for (p=0; p<items.length; p++) {
if (items[p]==spec) { found=1; break; }
}
if (found) { return p; } else { return -1; }
}
function showPad(ndx, info) { // just some function to do for testing
var c = info.textContent || info.innerHTML;
doc('cellNo').value = 'Position '+ndx+' : '+ c;
}
function tblHandlers(clickTag){
// convert collection to array, then map each element to an event function
// var links = Array.prototype.slice.call( document.querySelectorAll(clickTag), 0 );
var links = [...document.querySelectorAll(clickTag)]; // newer method
links.map(function mapper(elm, index){
elm.addEventListener(
"click",
function clicker(e){ showPad(index, this); }, // end clicker(e) function
// function clicker(e){ doc('cellNo').value = 'Index: '+index; }, // end clicker(e) function
false
); //end addEventListener
}); //end map() function
}
tblHandlers('td')
tblHandlers('th')
</script>
</body>
</html>
<i>
</i>nextBtn.addEventListener("click", e => {
if (counter === sections.length - 1) return;
counter++;
sections.forEach((section, index) => {
if (counter === index) {
toggleText(index, "show");
updateDot(index, "activeDot");
section.scrollIntoView({ behavior: "smooth" });
}
});
});
<i>
</i>window.addEventListener("wheel", e => {
const delta = e.wheelDelta;
if (delta < 1) {
nextBtn.click();
} else {
prevBtn.click();
}
});
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Element Index Test Page </title>
<!-- For: https://www.webdeveloper.com/d/385790-how-to-get-the-index-of-e-target/6 -->
<style>
ul { list-style-type: none; }
li { display: inline-block; } /* default is vertical display */
li { height: 0.6em; width: 3em; margin: 0.5em; background: lime; border: 1px solid black; }
li:hover { cursor: pointer; }
</style>
</head>
<body>
<ul id="scrollIndex">
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
Element Index: <input id="demo" value="">
<script>
console.clear();
function init() {
divArray = document.querySelectorAll('#scrollIndex li');
divArray.forEach(
(el,ndx) => el.addEventListener( // substitute your own Fat-Arrow => function actions
'click',
() => { console.log(ndx); document.getElementById('demo').value=ndx; } ) );
/* following also works as alternative to above
for ( const [ndx,el] of divArray.entries()) { // alert(ndx+'t'+el.innerHTML);
el.addEventListener( // substitute your own Fat-Arrow => function actions
'click',
() => { console.log(ndx); document.getElementById('demo').value=ndx; } );
}
/* end */
} init();
</script>
</body>
</html>
<i>
</i>dots.forEach(dot => {
dot.addEventListener("click", e => {
dots.forEach((current, index) => {
console.log(index);
});
});
});
<i>
</i>const navDots = document.querySelector(".nav-dots");
const dots = Array.from(navDots.children);
navDots.addEventListener("click", e => {
const clickedDot = e.target.closest("button");
const dotIndex = dots.findIndex(dot => dot === clickedDot);
counter = dotIndex;
sections.forEach((section, index) => {
if (counter === index) {
toggleText(index, "show");
updateDot(index, "activeDot");
section.scrollIntoView({ behavior: "smooth" });
}
});
});
0.1.9 — BETA 4.19