CODEWITHSUNDEEP
javascripthtmlcss
lps666
lps666

Reputation: 1

Cycle through, Show and Hide Text/div on first/last click

Sorry if this is a silly question, but I'm making something for a site and can't figure this one out.

How can I make this div appear on the first button click, cycle through the array, then disappear after the last item in the array?

var myArray = ["Hello", "Thank you", "Goodbye"];
var myIndex = 1;
var print = document.getElementById('print');

print.innerHTML = myArray[0]; //Print first value of array right away.

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length];
};
#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}
<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

JSfiddle: http://jsfiddle.net/jBJ3B/382/

Upvotes: 0

Views: 46

Answers (3)

IsraGab
IsraGab

Reputation: 5175

Is it what you trying to do:http://jsfiddle.net/yvbenitah/jBJ3B/393/.

If yes only add that line:

document.getElementById('notfound').style.display = 'none';

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370729

Because you don't want the div to appear before the first click, remove the line with //Print first value of array right away..

One option is to start with an index of -1, make the element visible when the index is 0, and hide the element when the index is higher or equal to the length of the array:

var arr = ["Hello", "Thank you", "Goodbye"];
var index = -1;
var print = document.getElementById('print');

function nextElement() {
  index++;
  if (index >= arr.length) {
    print.style.visibility = 'hidden';
    return;
  }
  if (index === 0) print.style.visibility = 'visible';
  print.textContent = arr[index];
}
#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}
.print {
  visibility: hidden;
}
<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

If you need the element to re-appear on further clicks, then use modulo to set index to -1 at the end:

var arr = ["Hello", "Thank you", "Goodbye"];
var index = -1;
var print = document.getElementById('print');

function nextElement() {
  index++;
  if (index >= arr.length) {
    print.style.visibility = 'hidden';
    index = -1;
    return;
  }
  if (index === 0) print.style.visibility = 'visible';
  print.textContent = arr[index];
}
#notfound {
  background: #2abfffff;
  padding: 19px;
  margin: 15px;
  color: #fff;
}
.print {
  visibility: hidden;
}
<div id="notfound">
  <p><span id="print"></span>.</p>
</div>

<a id="click" href="#" onclick="nextElement();">Click</a>

Upvotes: 1

Oscar O.
Oscar O.

Reputation: 116

You can check inside nextElement() if that element was the last one, and then just hide the div.

   function nextElement() {
      print.innerHTML = myArray[myIndex++%myArray.length];
      if(myIndex>myArray.length){
        document.getElementById("notfound").style.visibility = "hidden";
      }
   };

JSFiddle: http://jsfiddle.net/jBJ3B/384/

Upvotes: 0

Related Questions