jQuery buttons for FizzBuzz app

Question

I am working on a very simple JavaScript FizzBuzz app using Rails, but I can't seem to get the form and its buttons working. I know that this is very rough code, and some of it is in HTML and JavaScript as opposed to Ruby, because I am more familiar with the former two than the latter.

Here is my form:

<p>In this field, put the starting number. It must be a positive integer <50.</p>
<form name="FizzBuzz Form">
<input type="text" name="fizzBuzzStart"/>
</form>
<div class="button" id="start">Add!</div><br>
<p>In this field, put the ending number. It must be a positive integer >50.</p>
<form name="FizzBuzz Form">
<input type="text" name="fizzBuzzEnd"/>
</form>
<div class="button" id="end">Add!</div><br><br>
<div class="button" id="play">Let's play!</div><br>

This is my script.js file:

$("#start").click(function(){
  var start = $("input[name=fizzBuzzStart]").val();});
$("#end").click(function(){
  var end = $("input[name=fizzBuzzStart]").val();});
$("#play").click(function(){
    for (var i=start; i<=end; i++) {
        if (i%15===0){console.log("FizzBuzz");}
            else if (i%3===0){console.log("Fizz");}
            else if (i%5===0){console.log("Buzz");}
            else {console.log(i);} }});});

Any advice would be greatly appreciated!

For one thing, you are using fizzBuzzStart twice instead of fizzBuzzStart and fizzBuzzEnd. For another, you should inform is about what it is you are seeing as output. — sberry, Mar 22 '13 at 07:04
I didn't even notice the duplicate fizzBuzzStart. Thank you for catching that. I am seeing no output because my buttons are not working. Is that what you were asking? Thank you for trying to help. As I said, I am still very new to coding and really have no idea what I'm doing. — sodabottle37, Mar 22 '13 at 07:38

score 0 · Answer 1 · answered Mar 22 '13 at 07:05

0

The main problem is that start and end are used as local variables so they are effectively discarded as soon as they're set. Make them global and fix the field name typo in the #end click handler.

var start, end;

$("#start").click(function () {
    start = $("input[name=fizzBuzzStart]").val();
});

$("#end").click(function () {
    end = $("input[name=fizzBuzzEnd]").val();
});

$("#play").click(function () {
    for (var i = start; i <= end; i++) {
        if (i % 15 === 0) {
            console.log("FizzBuzz");
        } else if (i % 3 === 0) {
            console.log("Fizz");
        } else if (i % 5 === 0) {
            console.log("Buzz");
        } else {
            console.log(i);
        }
    }
});

Demo: http://jsfiddle.net/fJyRb/

answered Mar 22 '13 at 07:05

JJJ

32,902
20
89
102

This doesn't work as the click handler is triggered before entering a value, and the input fields can be selected without ever clicking anyway (ie. using Tab) but you are right about `start` and `end` being out of scope in the `#play` click handler, so no down vote. – sberry Mar 22 '13 at 07:13
@sberry Did you notice that the handlers aren't attached to the input fields but to the buttons below them? The program logic is that you have to type in the numbers and then click "add" to store the values in variables. Not very user-friendly or intuitive, but that's what the OP has. – JJJ Mar 22 '13 at 07:16
Thank you for being gracious about my app not being very user-friendly or intuitive. Again, I am really a novice at everything I am trying right now. I wondered about the accessibility of my variables but wasn't quite sure how to fix that. I updated my script.js file per your suggestion, but my buttons are still not functioning. – sodabottle37 Mar 22 '13 at 07:27
You need to give something more to work with. As you can see from the demos the code I and sberry have given works, so the problem is somewhere you aren't showing us. And yes, I realize this is just a practice so it's ok if it doesn't have the world's best user interface. – JJJ Mar 22 '13 at 07:29
I have my app pushed up to github at [this address](https://github.com/sodabottle37/FizzBuzzapp.git) – sodabottle37 Mar 22 '13 at 07:32
Thank you both for trying to help me. I really do appreciate it. If you have any suggestions for completely overhauling my process (I don't know how to attach an event handler to the input fields, for example) or any resources/guides that you believe may be helpful, I would be very grateful for that as well. Thank you. – sodabottle37 Mar 22 '13 at 07:42
It's a bit hard to tell what could be wrong without installing the whole project, but looks like you've commented out the document.ready event (the first line of the JS file) -- don't do that, it's needed. Also, keep the JavaScript error console open so that you'll see errors (the rest of the file isn't correctly commented out). – JJJ Mar 22 '13 at 08:29
Oops. That was commented out by accident (you can see there is rough code beneath it that has an undefined variable). However, it's still not working. I have the JavaScript error console log open and have gotten a syntax error for unexpected end of input but I have no idea where it is. – sodabottle37 Mar 22 '13 at 18:01

jQuery buttons for FizzBuzz app

1 Answers1