How to make onclick action(scroll down 150px) to specific class element that has no id using javascript?

Question

I have a tab table with id of "eael-advance-tabs-d1be836" and it has smaller elements with no id in them but they have "class" assigned to them. I tried to change the code i once used with getElementById to getElementByClassName and it doesn't work, the goal is to make a action when specific element with specific class is clicked in page and scroll down 150 pixels lower code sample below Inspect element view The sample below works perfectly with using id by the elements in tab table have no id but only "class". Is it possible to edit this code so that it would work with 'getElementsByClassName' ?

Thank you!

<html>
<body>

<form>
  <input class="cat" type="checkbox" id="myCheck" >
</form>

<p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p>

<script>

var scrollAmount = 150;
var element = document.getElementById("myCheck");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}
</script>

</body>
</html>

You can use the querySelectorAll to get all classes and use forEach or a loop to cycle through each element and add a click event to it. Example: `let elements = document.querySelectorAll('.className')`, and forEach: `elements.forEach(element => element.addEventListener('click', scrollPage)` — Aks Jacoves, Aug 17 '20 at 16:44
Probably a dupe of https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Aug 17 '20 at 16:50

score 0 · Answer 1 · answered Aug 17 '20 at 16:49

Just use document.getElementsByClassName("myScrollClass")[0] to get the first element with the desired class. If you have more than one element with this class iterate over it and set on every of them the eventlistner.

var scrollAmount = 150;
var element = document.getElementById("myCheck");
var element2 = document.getElementsByClassName("myScrollClass")[0];

element.addEventListener("click", scrollPage);
element2.addEventListener("click", scrollPage);


function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}

<form>
  <input class="cat" type="checkbox" id="myCheck" >With id
  <br>
  <input class="myScrollClass" type="checkbox" id="myCheck" >With class
</form>

<p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p>

Thank you! Did the job for me! – Jānis Pastars Aug 17 '20 at 20:31 — Jānis Pastars, Aug 17 '20 at 20:31

score 0 · Answer 2 · answered Aug 17 '20 at 16:51

You can use document.querySelector() like this

<html>
<body>

<form>
  <input class="cat" type="checkbox" id="myCheck" >
</form>

<p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p><p>text-text-text-text-text-text-text-text-text-text-text-text-</p>

<script>

var scrollAmount = 150;
var element = document.querySelector(".scroll-class");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}
</script>

</body>
</html>

score 0 · Answer 3 · answered Aug 17 '20 at 16:51

If it's just one element, use document.getElementsByClassName('CLASS')[0].addEventListener(...).

If you want to add an event listener to all the class elements, use

document.getElementsByClassName('CLASS').forEach(element => {
    element.addEventListener('click', scrollPage)
})

score 0 · Answer 4 · answered Aug 17 '20 at 16:53

0

document.body.addEventListener("click", function(e) {
    if(e.srcElement.classList.contains("myClass")) {
        scrollPage();
    }
})

answered Aug 17 '20 at 16:53

shunz19

495
4
13

How to make onclick action(scroll down 150px) to specific class element that has no id using javascript?

4 Answers4