how to pass an argument jquery and return the function value

Question

I am just learning the ropes with jQuery and I am trying to create the front end for a simple FizzBuzz game, I have a function as follows...

FizzBuzz.prototype.play = function(number){
    if (this.isDivisibleByFifteen(number)) {
        return "FizzBuzz";
    }
    else if (this.isDivisibleByThree(number)) {
        return "Fizz"; 
    }
    else if (this.isDivisibleByFive(number)) {
        return "Buzz";
    }
    else {
        return number;
    }
}

I wish to have a an html form which excepts the param (number) and returns the outcome within a span container...

<form id="game">
      <input type="text" name = "text" placeholder="Type your number"/>
</form>

<span id="outcome">??</span>```

Here is what I have so far, tear apart as you please...

$(document).ready(function() {
    $("#outcome").text(function() {
        fizzBuzz.play( $(this).attr("number") );
    });
});

Obviously this doesn't take into account any input from the form, but not really to sure how to do that yet. Many thanks.

MrCode · Accepted Answer · 2015-02-01 14:04:38Z

1

You're setting the outcome value on load. You need to capture some event in order to run the game when the user has provided a value, for example as you haven't got a button, here's how you can do it on key up:

$(document).ready(function() {
    $("#game input[name=text]").keyup(function() {
        $('#outcome').text(fizzBuzz.play( this.value ));
    });
});

Or if you want to run the game when the user presses the enter key (i.e submitting the form):

$(document).ready(function() {
    $("#game").submit(function() {
        $('#outcome').text(fizzBuzz.play( $('input[name=text]', this).val() ));
    });
});

answered Feb 1, 2015 at 14:04

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bardh Lohaj · Accepted Answer · 2015-02-01 14:10:26Z

You should use .prototype only if you are adding functionality to an existing prototype.

So you first have to define a prototype:

function fizzBuzz(){
// here you can define properties and methods (such as play method)
};

than you can add new functionalities if necessary

fizzBuzz.prototype.play = function(number){
    if (this.isDivisibleByFifteen(number)) {
        return "FizzBuzz";
    }
    else if (this.isDivisibleByThree(number)) {
        return "Fizz"; 
    }
    else if (this.isDivisibleByFive(number)) {
        return "Buzz";
    }
    else {
        return number;
    }
}

You should define the fizzBuzz on a new javascript file and than include that file on your view.

Than you define your view elements with ids' or classes so you can select them later:

<form id="game">
      <input type="text" id="number" name = "text" placeholder="Type your number"/>
</form>

<span id="outcome">??</span>

than you can create an object of fizzBuzz and than call its methods:

$(document).ready(function() {
    var myGame = new fizzBuzz();

    $("#number").change(function() {
        var number = $(this).val(); // get the number from text element
        // you probably want to validate if $(this).val() is a number.
        var result = myGame.play(number); 

        $("#outcome").text(result); // set the text of outcome = result.

    });
});

HannahCarney · Accepted Answer · 2015-02-01 14:06:22Z

0

 var val1 = $("#game").find('.game').val(); #you need a class="game" for this in your input html
   $("#outcome").text(var1);

You might need to parseInt your val1, because it probably goes through as a string:

parseInt(val1)

answered Feb 1, 2015 at 14:06

HannahCarney

3,6292 gold badges30 silver badges34 bronze badges

Comments

Chirag Mongia · Accepted Answer · 2015-02-01 14:11:15Z

0

You can try something like this-

$('#game').on('submit', function(e){
  e.preventDefault();
  var requiredText = fizzBuzz.play( $(this).find("input").val() );
  $('#outcome').text(requiredText);
})

Since, you have created a form. You need to enter any value in the input field and press Enter.

edited Feb 1, 2015 at 14:11

answered Feb 1, 2015 at 14:05

Chirag Mongia

5554 silver badges12 bronze badges

Comments

Kroltan · Accepted Answer · 2015-02-01 14:14:06Z

0

You're almost there! You just missed a return in your filler function:

$(document).ready(function() {
    $("#outcome").text(function() {
        return fizzBuzz.play( $(this).attr("number") );
    });
});

answered Feb 1, 2015 at 14:14

Kroltan

5,1565 gold badges40 silver badges64 bronze badges

Collectives™ on Stack Overflow

how to pass an argument jquery and return the function value

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related