Polling project

JavaScript
1

hello campers, please i know my code is a messy and i hard coded so many things but i need help with this.

  1. After prompting the user to pick an option but the user decides to click on cancel, i want it to return nothing but my code keeps on printing one of my else ifs statement and even my displayResults function on the. console.

  2. My while loop seems not to be working as well

const poll = {
  question: "What is your favourite programming language?",
  options: ["0: Javascript", "1: Python", "2: Rust", "3: C++"],
  answers: new Array(4).fill(0),
registerNewAnswer(){
  let pollNumber = Number(prompt((`${this.question}\n${this.options[0]}\n${this.options[1]}\n${this.options[2]}\n${this.options[3]}\n(Write option number)`)))
  while (
   pollNumber > this.options.length
  ){
    alert("Please input a valid option")
    pollNumber = Number(
      prompt(
        `${this.question}\n${this.options[0]}\n${this.options[1]}\n${this.options[2]}\n${this.options[3]}\n(Write option number)`
      )
    );
  }
    if(pollNumber === null)
      return;
    else if (pollNumber === 0) {
      this.answers[0]++;
      console.log( this.answers);
      // return this.answers;
    } else if (pollNumber === 1) {
      this.answers[1]++;
      console.log( this.answers);
      // return this.answers;
    } else if (pollNumber === 2) {
      this.answers[2]++;
      console.log( this.answers);
      // return this.answers;
    } else if (pollNumber === 3) {
      this.answers[3]++;
      console.log( this.answers);
      // return this.answers;
    }
    this.displayResults()
    this.displayResults("string")
},
displayResults(type = "array"){
  if(type === "array"){
    console.log(this.answers);
  }
  else if(type === "string"){
    console.log(`Poll results are ${this.answers.join(", ")}`)
  }
}
}
// poll.registerNewAnswer()
// console.log(poll.registerNewAnswer());

document.querySelector(".poll").addEventListener("click", poll.registerNewAnswer.bind(poll));
2

please can anyone help me with these?

  1. After prompting the user to pick an option but the user decides to click on cancel, i want it to return nothing but my code keeps on printing one of my else ifs statement and even my displayResults function on the console.

  2. My while loop seems not to be working as well

3

Can you give us the HTML for this too?

4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>A Closer Look at Functions</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(to top left, #28b487, #7dd56f);
      }
      h1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.3;
        width: 100%;
        padding: 30px;
        text-align: center;
        color: white;
      }
      .buy,
      .poll {
        font-size: 1.6rem;
        padding: 1rem 2rem;
        position: absolute;
        top: 2rem;
      }
      .buy {
        left: 2rem;
      }
      .poll {
        right: 2rem;
      }
    </style>
  </head>
  <body>
    <h1>A Closer Look at Functions</h1>
    <button class="buy">Buy new plane 🛩</button>
    <button class="poll">Answer poll ⁉️</button>
    <script src="script.js"></script>
  </body>
</html>

this is it

5

Two things:

  • Add a console.log to show you the value of pollNumber after you get it from prompt (and then check the value when you click Cancel).

  • Open your browser’s dev tools and go to the Console tab and type the following at the prompt at the bottom:

Number(null)

Hopefully these two hints will help you solve your first issue.

6

  1. I am getting 0 when i console.log(pollNumber). How do i differentiate it with the one from my first element in the array

  2. Number(null) returns 0

7

Maybe you shouldn’t convert the return value you get from prompt to a Number right away.

8

So it means i should also convert my conditionals to String? like this?

else if (pollNumber === "0") {
      this.answers[pollNumber]++;
      console.log(this.answers);

the above works but it will still go ahead to call this function

this.displayResults("string")
9

Not necessarily. It means you need to check the value returned by prompt before you do anything with it to make sure it’s what you are expecting. When the user does a Cancel then prompt returns null, so you need to check for that and handle it appropriately. If the user enters something then prompt will return a string of what they entered. What if they entered something other than the numbers you are expecting? You need to check for this and then handle it appropriately. Once you have done all your checks and are satisfied they have only entered a number you were expecting then go ahead and convert it to a Number and do what you will with it.

10 
const poll = {
  question: "What is your favourite programming language?",
  options: ["0: Javascript", "1: Python", "2: Rust", "3: C++"],
  answers: new Array(4).fill(0),
registerNewAnswer(){
  let pollNumber = prompt((`${this.question}\n${this.options[0]}\n${this.options[1]}\n${this.options[2]}\n${this.options[3]}\n(Write option number)`))
  while (Number(pollNumber) >= this.options.length || isNaN(pollNumber)) {
    alert('Please input a valid option');
    pollNumber = prompt(
      `${this.question}\n${this.options[0]}\n${this.options[1]}\n${this.options[2]}\n${this.options[3]}\n(Write option number)`
    );
  };
  // while(isNaN(pollNumber)){
  //   alert('Please input a valid option');
  //   pollNumber = prompt(
  //     `${this.question}\n${this.options[0]}\n${this.options[1]}\n${this.options[2]}\n${this.options[3]}\n(Write option number)`
  //   );
  // };
    if(pollNumber === null)
      return;
    else if (Number(pollNumber) === 0) {
      this.answers[pollNumber]++;
      console.log(this.answers);
      // return this.answers;
    } else if (Number(pollNumber) === 1) {
      this.answers[pollNumber]++;
      console.log(this.answers);
      // return this.answers;
    } else if (Number(pollNumber) === 2) {
      this.answers[pollNumber]++;
      console.log(this.answers);
      // return this.answers;
    } else if (Number(pollNumber) === 3) {
      this.answers[pollNumber]++;
      console.log(this.answers);
      // return this.answers;
    }
    this.displayResults("string")
},
displayResults(type = "array"){
  if(type === "array"){
    console.log(this.answers);
  }
  else if(type === "string"){
    console.log(`Poll results are ${this.answers.join(", ")}`)
  }
}
}

document.querySelector(".poll").addEventListener("click", poll.registerNewAnswer.bind(poll));

This works now. Thank you for your help

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.