CODEWITHSUNDEEP
javascripthtmlboolean
TamTaminToronto
TamTaminToronto

Reputation: 121

Satisfying button click condition to bring up a message in javascript

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>

Upvotes: 0

Views: 705

Answers (4)

sample
sample

Reputation: 412

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>

Upvotes: 1

BCDeWitt
BCDeWitt

Reputation: 4773

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>

Upvotes: 2

Dzefo
Dzefo

Reputation: 113

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.

Upvotes: 1

Coupe
Coupe

Reputation: 372

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";
  }
})

Upvotes: 1

Related Questions