我正在学习使用jQuery的绳索,我正在尝试为简单的FizzBuzz游戏创建前端,我有如下函数...
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;
}
}
我希望有一个html表单,它除了param (number)
并在span容器中返回结果...
<form id="game">
<input type="text" name = "text" placeholder="Type your number"/>
</form>
<span id="outcome">??</span>```
到目前为止,这是我所拥有的,随意撕裂......
$(document).ready(function() {
$("#outcome").text(function() {
fizzBuzz.play( $(this).attr("number") );
});
});
显然,这并没有考虑来自表单的任何输入,但还没有真正确定如何做到这一点。非常感谢。
答案 0 :(得分:1)
您在加载时设置结果值。你需要捕获一些事件才能在用户提供值时运行游戏,例如你没有按钮,这就是你如何在键盘上进行操作:
$(document).ready(function() {
$("#game input[name=text]").keyup(function() {
$('#outcome').text(fizzBuzz.play( this.value ));
});
});
或者如果你想在用户按下回车键(即提交表格)时运行游戏:
$(document).ready(function() {
$("#game").submit(function() {
$('#outcome').text(fizzBuzz.play( $('input[name=text]', this).val() ));
});
});
答案 1 :(得分:0)
你可以尝试这样的事情 -
$('#game').on('submit', function(e){
e.preventDefault();
var requiredText = fizzBuzz.play( $(this).find("input").val() );
$('#outcome').text(requiredText);
})
因为,您已经创建了一个表单。您需要在输入字段中输入任何值,然后按Enter键。
答案 2 :(得分:0)
var val1 = $("#game").find('.game').val(); #you need a class="game" for this in your input html
$("#outcome").text(var1);
你可能需要解析你的val1,因为它可能是一个字符串:
parseInt(val1)
答案 3 :(得分:0)
只有在向现有原型添加功能时才应使用.prototype。
所以你首先必须定义一个原型:
function fizzBuzz(){
// here you can define properties and methods (such as play method)
};
比必要时添加新功能
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;
}
}
您应该在新的javascript文件上定义fizzBuzz,而不是在视图中包含该文件。
比使用ids&#39;定义视图元素。或类,以便您以后可以选择它们:
<form id="game">
<input type="text" id="number" name = "text" placeholder="Type your number"/>
</form>
<span id="outcome">??</span>
比你可以创建一个fizzBuzz对象而不是调用它的方法:
$(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.
});
});
答案 4 :(得分:0)
你快到了!您刚刚错过了填充函数中的return
:
$(document).ready(function() {
$("#outcome").text(function() {
return fizzBuzz.play( $(this).attr("number") );
});
});