【发布时间】：2016-01-31 08:20:00
【问题描述】：
我正在尝试将从表单中获得的值传递给名为 Robot() 的构造函数；通过自己传入参数，我可以在控制台中完成此操作。 例如： var travis = new Robot("Travis","Blue","medium"); 如果我要输入类似 travis.speed 的内容，它将按预期返回 1。
但是当我尝试在网站上使用我的表单并对其进行测试时，控制台显示 Travis 未定义。
我觉得我做的一切都是正确的，但显然我不是。如果有人可以请帮助我，我将不胜感激。
我的 script.js：
var $canvas = $("canvas");
var ctx = $canvas[0].getContext("2d");
function Robot(name, color, robotBuild){
this.name = name.toLowerCase();
this.robotBuild = 'medium';
this.health = 100;
this.speed = 1;
this.strength = 1;
this.powerState = false;
this.maxStrength = 100;
this.minStrength = 1;
this.maxSpeed = 10;
this.minSpeed = 1;
this.maxHealth = 100;
this.minHealth = 0;
this.points = 0;
//ROBOT POSITION VALUES
this.posX = 0;
this.posY = 0;
//ROBOT PHYSICAL PROPERTIES
this.robotWidth = 10;
this.robotHeight = 10;
this.robotColor = color.toLowerCase();
}
Robot.prototype.draw = function(){
ctx.beginPath();
ctx.rect(this.posX, this.posY, this.robotWidth, this.robotHeight);
ctx.fillStyle = this.robotColor;
ctx.fill();
ctx.closePath();
this.powerState = true;
};
Robot.prototype.power = function(powerState){
powerState.toLowerCase();
if(powerState === "on"){
this.powerState = true;
}else if(powerState === "off") {
this.killRobot();
}else {
console.log("Input must be a value of 'on' or 'off'.");
}
};
Robot.prototype.killRobot = function(){
this.powerState = false;
ctx.clearRect(0, 0, $canvas.width, $canvas.height);
console.log(this.name + " the robot is now dead.");
};
Robot.prototype.setStrength = function(num){
if( num < this.minStrength || num > this.maxStrength ){
return 'error: strengthLevel can not be less than 0 or greater than 100.';
}else if(isNaN(num)){
return 'error: Input must be a numbered value.';
}else {
this.strength = num;
return this.strength;
}
};
Robot.prototype.incHealth = function(num){
if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}
else if((this.health + num) >= this.maxHealth ){
this.health = 100;
console.log('You have reached full Health, use it wisely.');
}else {
this.health += num;
console.log('Your Health is increasing.');
return this.health;
}
};
Robot.prototype.decHealth = function(num){
if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}
else if( (this.health - num) <= this.minHealth){
this.powerState = false;
this.health = 0;
this.killRobot();
return this.health;
}else {
this.health -= num;
console.log('You are loosing health:(');
return this.health;
}
};
Robot.prototype.incSpeed = function(num){
if( (this.speed + num) < this.minSpeed || (this.speed + num) > this.maxSpeed ){
console.log('error: Speed Level can not be less than 0 or greater than 100.');
}else if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}else {
this.speed += num;
return this.speed;
}
};
Robot.prototype.decSpeed = function(num){
if( (this.speed - num) < this.minSpeed || (this.speed - num) > this.maxSpeed ){
console.log('error: Speed Level can not be less than 0 or greater than 100.');
}else if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}else {
this.speed -= num;
return this.speed;
}
};
Robot.prototype.incStrength = function(num){
if( (this.strength + num) < this.minStrength || (this.strength + num) > this.maxStrength ){
console.log('error: strengthLevel can not be less than 0 or greater than 100.');
}else if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}else {
this.strength += num;
return this.strength;
}
};
Robot.prototype.decStrength = function(num){
if( (this.strength - num) < this.minStrength || (this.strength - num) > this.maxStrength ){
console.log('error: strengthLevel can not be less than 0 or greater than 100.');
}else if(isNaN(num)){
console.log('error: Input must be a numbered value.');
}else {
this.strength -= num;
return this.strength;
}
};
//MOVING ROBOT POSITION FUNCTIONALITY
Robot.prototype.position = function(){
this.position = {
posX: this.posX,
posY: this.posY
};
return this.position;
};
Robot.prototype.moveUp = function(y){
if(this.powerState === true){
this.posY += y;
return this.posY;
}else {
console.log("Robot is dead and can not move.");
}
};
$(".createRobot").click(function(){
$("#robotForm").toggle();
});
$("#submitRobot").click(function(e){
e.preventDefault();
var robotName = $("#robotName").val();
var robotColor = $("#robotColor").val();
var robotBuild = $("#robotBuild option:selected").text();
console.log(typeof robotName); // should return "string"
console.log(robotName + ", " + robotColor + ", " + robotBuild);
var robot = new Robot(robotName, robotColor, robotBuild);
});
HTML 表单：
<div id="robotForm">
<h4>Create your robot with the form below:</h4>
<p><label>Your Robot's name:<input class="robotName" type="text" name="name" value="" placeholder="Robot's name"></label></p>
<p><label>Your Robot's color:<input class="robotColor" type="text" name="color" value="" placeholder="Robot's color"></label></p>
<p><label>Your Robot's build type:
<select class="robotBuild" name="robotBuild">
<span>Select your robot's build type</span>
<option name="small" value="small">Small Robot Build</option>
<option name="medium" value="medium">Medium Robot Build</option>
<option name="large" value="large">Large Robot Build</option>
</select>
</label>
</p>
<button class="submitRobot" type="submit">Submit your Robot</button>
</div>
【问题讨论】：
-
您希望
return robot;实际返回到什么位置？未定义的日志记录在哪里？ -
向我们展示您的测试，因为问题是在您的点击事件中，您将机器人实例返回到无处。
-
您实际上并没有在这里测试您的机器人对象，您应该尝试执行类似
console.log(robot.name)的操作，看看会发生什么。 -
Travis没有定义，因为你没有定义它（至少没有在你发布的代码中）。也许使用Travis = new Robot(...)而不是var robot = ...？ -
您正在事件侦听器范围内创建
Robot实例。如果您想在事件侦听器之外使用它，请在外部范围内定义一个变量并将实例分配给它，或者直接使用window.robot1 = new Robot()。
标签： javascript jquery