CODEWITHSUNDEEP
javascript
Ching Ching
Ching Ching

Reputation: 1049

javascript select spesified element on click event

i have a problem about getting spesified element that i need to.

so, this is my code :

<p class="prev">prev</p>
<p class="next">next</p>

<ul class="parent">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

document.querySelectorAll(".next")[0].addEventListener("click", function() {
    var x = querySelectorAll(".parent li")[2].innerHTML;
    alert(x);  // output 2

});

document.querySelectorAll(".prev")[0].addEventListener("click", function() {
    var x = querySelectorAll(".parent li")[2].innerHTML;
    alert(x);  // output -2

});

so, if i click .next the output will ---> 2 ----> again ----> 6 ----> again ----> 8 ----> and again ----> 10

.prev also ---> from 10 to 8 from 8 to 6 from 6 to 4 from 4 to 2 from 2 to 0

so, how exactly to solve this problem?

Upvotes: 0

Views: 69

Answers (2)

Andy
Andy

Reputation: 63550

One issue is that you want the end output to go to zero, but you have no element with that content so you need to add it in. Regardless here's some working code.

I've used ids for the next and prev buttons because that makes more sense, and I've separated out the code so it's a little easier to read. I also moved the li selection outside of the function because you only need to pick them up once, not every time you call one of the functions. Note, this logs to the console rather than an alert because it made it easier to test the code.

var next = document.getElementById('next');
var prev = document.getElementById('prev');
var lis = document.querySelectorAll(".parent li");

next.addEventListener('click', advance, false);
prev.addEventListener('click', retreat, false);

var index = 0;

function advance() {
    if (index + 2 < lis.length - 1) {
        index += 2;
        console.log(lis[index].innerHTML);
    }
}

function retreat() {
    if (index > 0) {
        index -= 2;
        console.log(lis[index].innerHTML);
    }
}

DEMO

Upvotes: 2

CoderPi
CoderPi

Reputation: 13211

Here is the code you are looking for:

var index = 0;

document.querySelectorAll(".prev")[0].addEventListener("click", function() {
  index = index - 2;
  if (index < 0) { // don't go below 0
    index = 0; // correct it
  } else {
    // Goto Previous Element
    var x = document.querySelectorAll(".parent li")[index].innerHTML;
    alert(x);
  }
});

document.querySelectorAll(".next")[0].addEventListener("click", function() {
  var index_max = document.querySelectorAll(".parent li").length - 1;
  index = index + 2;
  if (index > index_max) { // don't go futher than elements exist
    index = index_max; // correct it
  } else {
    // Goto Next Element
    var x = document.querySelectorAll(".parent li")[index].innerHTML;
    alert(x);
  }
});
<p class="prev">prev</p>
<p class="next">next</p>
<ul class="parent">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Upvotes: 1

Related Questions