1

I am new to programming and am currently stuck on the Ping-Pong aka FizzBuzz problem. (Make a webpage where the user is prompted to enter a number and every number up to that number is displayed. However, for multiples of three, the page prints "ping," for multiples of five, the page prints "pong," and for multiples of both three and five (15), the page prints "ping-pong.")

I've checked out other solutions on here (such as this one) and they've been helpful for understanding how to solve it. And I hope my javascript reflects that.

My problem is I'm stuck trying to take the input number from the form I have on the webpage and run it through the javascript, if that makes sense.

I'm pretty sure that part of my javascript is just a conglomeration of throwing everything I had at it, which is not the best. Could anyone check out my code and see what I'm doing wrong here?

Here's my HTML:

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/scripts.js"></script>

    <title>Ping-Pong Test</title>
  </head>

  <body>
    <div class="container">
      <h1>Ping Pong Test</h1>
      <p>Let's play the Ping-Pong game. The Ping-Pong game is a simple test that involves loops, conditionals, and variables. Enter your number below to start</p>

      <form id="start-form">
        <label for="input-number">Your number:</label>
        <input id="input-number" type="number">

        <button type="submit" class="btn">Calculate</button>
      </form>

      <div id="end-number">
        <ul id="results"></ul>
      </div>
    </div>
  </body>
</html>

And my javascript:

$(document).ready(function () { 
$("#start-form").submit(function(event) {
    var a = document.getElementById("#input-number");
    var num = a.elements[0].value;
    var listItems = "";
    var i;
    for (var i = 1; i <= num; i++) {
    if (i % 15 === 0) {
        console.log("Ping-Pong");
    }
    else if (i % 3 === 0) {
        console.log("Ping");
    }
     else if (i % 5 === 0) {
        console.log("Pong");
    }
    else{
    console.log(i);
    };

event.preventDefault();

};

});

Again, I'm new, so if anyone could break it down step by step, I'd really appreciate it. Thanks.

Community
  • 1
  • 1
Kyle Chase
  • 19
  • 1
  • 2
    Remove the # from the .getElementById('input-number'); – Waxi Jan 08 '15 at 16:29
  • Also I'm pretty sure `a` is an element, he doesn't need the `.elements[0]` bit. – mpen Jan 08 '15 at 16:37
  • please create a code pen or js fiddle next time. i created one for you and fixed it up. you had two minor problems (already mentioned here): http://codepen.io/mnpenner/pen/QwdvLM?editors=101 – mpen Jan 08 '15 at 16:41

2 Answers2

2

It is not right:

var a = document.getElementById("#input-number");

Must be one of the below lines:

var a = document.getElementById("input-number");
// Or
var a = $("#input-number").get(0);
// Or
var a = $("#input-number")[0];

But it will not solve your problem. Looking deep into your code. I guess you need to have a form an then get the first element:

 var a = document.getElementById("start-form");
 var num = a.elements[0].value;

But you can simplify even more. Why not just do it:

 // remove the a variable
 var num = $("#input-number").val(); // get the input-number value
nanndoj
  • 6,580
  • 7
  • 30
  • 42
0

Based on your code I think you just need some syntax cleaned up in order for jquery to use the value from your form.
I took your code, stripped it down for clarity and made a fiddle out of it. Here is the link:

http://jsfiddle.net/zwa5s3ao/3/

$(document).ready(function(){
  $("form").submit(function(event){
    var num = $('#input-number').val()

    for (var i = 1; i <= num; i++) {
      if (i % 15 === 0) {
        $('#list').append('<li>'+"Ping-Pong"+'</li>');}
      else if (i % 3 === 0) {
        $('#list').append('<li>'+"Ping"+'</li>');}
      else if (i % 5 === 0) {
        $('#list').append('<li>'+"Pong"+'</li>');}
      else{
        $('#list').append('<li>'+i+'</li>');}

    };

  event.preventDefault();
  
  });
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Ping-Pong Test</title>

<body>
    
  <form>
    Your number: 
    <input type="number" name="input-number" id="input-number">
    <input type="submit" value="Calculate">
  </form> 

  <ul id="list"></ul>
</body>

Hope this helps!

Bryan
  • 53
  • 7