Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Maria Cecilia Le Brech
Maria Cecilia Le Brech
3,611 Points

Why this front end logic wont work in this js?

Well the back end works because i tested it with an alert box. But the list is not returned in the website. Can you take a look and help me? 

//Back-End//
var pingPong = function(number) {
  var result;
  var index;
  for (var index = 1; index <= number; index += 1) {
    if (index % 15 === 0) {
    result = "pingpong";
    } else if (index % 3 === 0) {
    result = "ping";
    } else if (index % 5 === 0) {
    result = "pong";
    } else {
    result = index;
    }
    return result;
  }
};
//Front-End//
$(document).ready(function () {
  $("#blanks form").submit(function(event) {
    event.preventDefault();
    var userInput = parseInt($("input#number").val());
    var result = pingPong(userInput);
   $("#output").append("<li>"+ result + "</li>");


  });
});
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Is there more to this? Like some HTML?

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Without seeing the rest of the code, I can't replicate what you are seeing, but I do notice that your "back-end" contains a loop that has "return result;" inside it.

:point_right: So this means the loop code will always be executed just one time.

I'm guessing this is probably not what you intended.

-sp:sparkles:

Maria Cecilia Le Brech
Maria Cecilia Le Brech
3,611 Points
Maria Cecilia Le Brech
Maria Cecilia Le Brech
3,611 Points

Heres the INDEX

<!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-3.0.0.js"></script>
    <script src="js/scripts.js"></script>
    <title>Ping Pong</title>
  </head>
  <body>
    <div class="jumbotron">
        <h1>Please input a number</h1>
      </div>
    <div id="container">
        <div id="blanks">
            <form>
              <div class="form-group">
                <label for="number">Number</label>
                <input id="number" class="form-control" type="text">
              </div>
              <button type="submit" class="btn btn-info btn-lg">Result</button>
            </form>
       </div>
    <div id="output">

    </div>
  </body>
</html>