Cigaras Cigaras - 7 months ago 13
Javascript Question

Dynamic website change after few buttons clicked

First of all I am very new at this so sorry in advance if I say something stupid.

The idea is very simple: lets say I have a website with bunch of buttons. User click some buttons and underneath them some text appears. If user clicks wrong buttons text disappears on another text appears instead.

I could do this using PHP with POST and some forms, but it reloads the whole page, that I do not like. And if after submitting I refresh the page I get annoying message "The page that you're looking for used information that you entered. Returning to that mage might cause any action you took to be repeated.", I'd like to return to default text after refreshing without any messages.

To make things simple and clear, I'll give an example: lets say I have 6 buttons on my website, named 1, 2, 3, 4, 5 and 6, and text underneath would list last 3 buttons clicked (code on jsfiddle.bet):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<br/>
<p>Last 3 buttons clicked: none</p>
</body>
</html>


Lets say user clicks buttons 1, 2 and 3, then text changes to "Last 3 buttons clicked: 1, 2, 3", after that user clicks 3 again and now text says "Last 3 buttons clicked: 2, 3, 3".

Even greater would be if after clicking specific 3 buttons all the buttons would disappear and "Victory!" text would be shown instead of them.

Something like a door lock code.

So, could someone please give me an example of how to get my desired result?

Answer

You can use array push() and shift() to add an element at the end of an array and remove first element, respectively.

So you could keep track of your pushed element with handling an array with size <= 3.

The correct code for this snippet is 4 3 2.

// add event listeners
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    digicode(this);
  });
}

// the array holding last 3 codes
var codes = [];

// handling the array
var digicode = function(element) {
  codes.push(parseInt(element.innerHTML));
  if (codes.length > 3) codes.shift();
  var codes_tmp = "";
  for (var i = 0; i < codes.length; i++) {
    codes_tmp += codes[i] + " ";
  }
  document.getElementById("clicked").innerHTML = codes_tmp;

  // handling "victory"
  if (codes[0] !== undefined && codes[0] == 4 &&
    codes[1] !== undefined && codes[1] == 3 &&
    codes[2] !== undefined && codes[2] == 2) {
    document.body.innerHTML = "";
    alert("Victory!");
  }
  console.log(codes);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  <button type="button">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  <button type="button">4</button>
  <button type="button">5</button>
  <button type="button">6</button>
  <br/>
  <p>Last 3 buttons clicked: <span id="clicked">none</span>
  </p>
</body>

</html>

Comments