Satisfying button click condition to bring up a message in javascript

Question

Sorry in advance if my code is really bad but I am just a beginner. I would like to create a word search puzzle using buttons. When the person is finished finding by clicking on all of the words which I am going to make from buttons I want a message to come up that they have completed the puzzle. So I created a sample here with 4 buttons but I can't seem to get my code to work. I want the message to come up in the div container once all the buttons have been clicked on. Am I on the right track here or way off? Any insight would be so much appreciated!

<html>

      <p onclick="myFunction()" id="1" value=false >Button1</p>
      <p onclick="myFunction()" id="2" value=false >Button2</p>
      <p onclick="myFunction()" id="3" value=false >Button3</p>
      <p onclick="myFunction()" id="4" value=false >Button4</p>

      <div id="demo">Message displays here if all 4 buttons are clicked</div>

<script>
function myFunction(){
  value = true;}

    if(p 1){
        value = true;}

    if(p 2){
        value = true;}

    if(p 3){
        value = true;}

    if(p 4){
        value = true;}
else{
  document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";}

}
</script>
</html>

Your function ends immediately after your first value = true; when you close the curly braces. Your if-statements aren't even in the function. I think you want to add the statement from your curly braces inside the parentheses myFunction(value=true) {...}. Next, you would need to define p. And probably use == to check its value: if (p == 1){...} But you also aren't checking value against anything, so what's its purpose? — mykaf
– mykaf, Commented Nov 12, 2020 at 22:21
yeah I have a lot to learn. Thanks for explaining though. Appreciate it! — TamTaminToronto
– TamTaminToronto, Commented Nov 12, 2020 at 22:28

BCDeWitt · Accepted Answer · 2020-11-12 22:17:25Z

You could use the buttons' data attributes to hold their state. (Note: for a more complex project, you probably don't want to do this)

Also, putting JS inline like onclick="myfunction()" is somewhat bad for your code - it encourages globals and makes JS logic harder to follow. So, I've shown an alternative using an IIFE, .querySelectorAll(), and .addEventListener():

// IIFE to keep variables out of the global scope
;(() => {
  // NOTE: These are more flexible when they are arrays (thus, Array.from())
  const btnEls = Array.from(document.querySelectorAll('.js-button'))
  const msgEls = Array.from(document.querySelectorAll('.js-message'))

  const handleButtonClick = ({ target: btnEl }) => {
    btnEl.disabled = true // optional
    btnEl.dataset.toggled = 'true' // using the DOM to hold data

    if (btnEls.some(el => el.dataset.toggled !== 'true')) return

    msgEls.forEach(el => {
      el.textContent = 'Congratulations you clicked on all of the buttons'
    })
  }

  // Our "onclick" equivalent
  btnEls.forEach(el => el.addEventListener('click', handleButtonClick))
})()

<button class="js-button">Button1</button>
<button class="js-button">Button2</button>
<button class="js-button">Button3</button>
<button class="js-button">Button4</button>

<p class="js-message">Message displays here if all 4 buttons are clicked</p>

...There's probably a lot of syntax there you don't know but that example should be helpful for those learning from a more modern source. Since you're learning from something that uses older JS syntax, here's some older JS code that works about the same (but isn't as easy to maintain):

// IIFE to keep variables out of the global scope
;(function () {
  // NOTE: These are more flexible when they are arrays (thus, Array.from())
  var btnEls = Array.from(document.querySelectorAll('.js-button'))
  var msgEls = Array.from(document.querySelectorAll('.js-message'))

  function handleButtonClick(event) {
    var btnEl = event.target
    btnEl.disabled = true // optional
    btnEl.dataset.toggled = 'true' // using the DOM to hold data

    if (btnEls.some(function (el) {
      return el.dataset.toggled !== 'true'
    })) return

    msgEls.forEach(function (el) {
      el.textContent = 'Congratulations you clicked on all of the buttons'
    })
  }

  // Our "onclick" equivalent
  btnEls.forEach(function (el) {
    el.addEventListener('click', handleButtonClick)
  })
})()

<button class="js-button">Button1</button>
<button class="js-button">Button2</button>
<button class="js-button">Button3</button>
<button class="js-button">Button4</button>

<p class="js-message">Message displays here if all 4 buttons are clicked</p>

sample · Accepted Answer · 2020-11-16 00:19:36Z

1

Here was my solution.

var set = []; //decalre an empty array

function myFunction(Id) {
  console.log(Id); //the Id will be the vlaue from the button. For example button 1 has an Id of one as passed into by 'myFunction(1)
  if (set.indexOf(Id) == -1) { //here we check to see if the Id number is in the array
    set.push(Id); //if it's not in the array, we add it in
    console.log(set);
    console.log("length: " + set.length);
    if (set.length > 3) { //if the lengthof the array is greater than three, all 4 buttons have been clicked.
      document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
    }
  } 
}

<p onclick="myFunction(0)">Button0</p>
<p onclick="myFunction(1)">Button1</p>
<p onclick="myFunction(2)">Button2</p>
<p onclick="myFunction(3)">Button3</p>
<div id="demo">Message displays here if all 4 buttons are clicked</div>

edited Nov 16, 2020 at 0:19

answered Nov 12, 2020 at 21:58

sample

4123 silver badges10 bronze badges

2 Comments

TamTaminToronto Over a year ago

Such a lovely option. Thank you!

sample Over a year ago

no problem :) I don't think you will be getting more answers than 4, however, so you should mark one as correct (doesn't have to be me, btw, I think all of these are good options).

Coupe · Accepted Answer · 2020-11-12 21:19:21Z

1

An easier way of doing this is with an event listener that listens to each button click, then makes the value of that button true, and then checks all the buttons to see if they are all clicked and if so output the congrats message

HTML

added classes to each button and removed the onclick function

<html>
      <p class='button' id="1" value=false >Button1</p>
      <p class='button' id="2" value=false >Button2</p>
      <p class='button' id="3" value=false >Button3</p>
      <p class='button' id="4" value=false>Button4</p>

      <div id="demo">Message displays here if all 4 buttons are clicked</div>
</html>

JS

window.addEventListener('click', (e)=>{
  var bool = true
  if (e.target.classList.contains('button')) {
    e.target.setAttribute('value', "true")
  }
  buttons = document.querySelectorAll('.button')
  for (let i = 0; i < buttons.length; i++) {
    console.log(buttons[i].getAttribute('value'))
    if (buttons[i].getAttribute('value') == "false") {
      bool = false
    }
  }
  if (bool == true) {
    document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
  }
})

answered Nov 12, 2020 at 21:19

Coupe

3722 silver badges12 bronze badges

1 Comment

TamTaminToronto Over a year ago

I like this. I will need to implement the code into the animation program I am using to create the puzzle. So I think the way you have put this together will work for me but will take a bit of time to try it. Thank you very much!

Dzefo · Accepted Answer · 2020-11-12 21:29:52Z

I would suggest this as an easy answer to understand javascript and html a little better:

HTML

<html>
  <body>
    <button onclick="myFunction(event)" name="button1">Button1</button>
    <button onclick="myFunction(event)" name="button2">Button2</button>
    <button onclick="myFunction(event)" name="button3">Button3</button>
    <button onclick="myFunction(event)" name="button4">Button4</button>
    <div id="demo">Message displays here if all 4 buttons are clicked</div>
  </body>
</html>

JS

    var foundButtons = {
      button1: false,
      button2: false,
      button3: false,
      button4: false,
    };

    function myFunction(event) {
      foundButtons[event.target.name] = true;
      for (var button in foundButtons) {
        if (foundButtons.hasOwnProperty(button)) {
          if (!foundButtons[button]) {
            return
          }
        }
      }
      document.getElementById("demo").innerHTML = "Congratulations you clicked on all of the buttons";
    }

What this does is that you have an object of the buttons or rather the words that must be clicked to show the message. Now when one of the buttons gets clicked, its property gets set to true. Then it iterates over the properties and ends the function with a return statement, if it finds a false value, which means there is a button that has not been clicked. When the function does not get stopped it will show the success message.

Collectives™ on Stack Overflow

Satisfying button click condition to bring up a message in javascript

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related