Question

我试图将我从表单中获取的值传递给名为Robot（）的构造函数;通过自己传递参数，我在控制台中完成此操作没有任何问题。例如：var travis = new Robot（“Travis”，“Blue”，“medium”）; 如果我输入类似travis.speed的东西，它会按预期返回1。

但是当我尝试在网站上使用我的表单并测试它时，控制台上说Travis没有定义。

我觉得我做的一切都是正确的，但显然我不是。如果有人能帮助我，我会非常感激。

my 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>

Answer 1

$(".submitRobot").click(function(e){
    e.preventDefault();
    var robotName = $(".submitRobot").val();
    var robotColor = $(".robotColor").val();
    var robotBuild = $(".robotBuild").val();
    console.log(typeof(robotName));
    console.log(robotName + ", " + robotColor + ", " + robotBuild);
    var robot = new Robot(robotName, robotColor, robotBuild);
    $("#res").html(robot.speed);
	return robot;
	
});

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();
	return this;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=name class='submitRobot' value='Travis'>
<input type=text class='robotColor' value='Blue'>
<input tyle=text class='robotBuild' value='medium'>

<input type=button class='submitRobot' value=submitRobot>

<div id=res></div>

当我运行时显示1

Answer 2

我不知道你想对回归做什么，但我认为没关系。

您必须确保在事件处理程序执行之前执行包含Robot-class的代码（即通过在除jQuery之外的任何其他代码之前加载JavaScript文件）。

此外，机器人的范围不正确。我不再使用那种类型的声明，因为它会做所有事情，但不是你想要的。相反，最好通过执行以下操作直接将类分配给窗口对象：

window.Robot = function(...) { ... };

这样，Robot类全局可用。

费边

Answer 3

当您使用robotName robotColor robotBuild函数时，您正在使用val()函数从text()中提取jQuery信息。当您尝试构建对象并从中提取信息时，最终会得到空白数据甚至是错误的引用。

Answer 4

你的函数$(".submitRobot").click(function(e) etc是jQuery 它为类“submitRobot”的所有DOM节点（HTML）添加了一个clickhandler 每当用户点击这样一个DOM节点时，它就会从类“robotName”等的其他DOM节点中获取val()。注意：HTML中可能有多个节点，可能更好地使用ID而不是Class选择器。

然后它创建一个实体robot，它是你构建的Robot类。

这里的问题是：

变量 Travis不存在（变量robot，robot.name可能包含“Travis”字符串内容。

并且clickhandler函数可能无法从您的表单中获取值，因此robot.name可能是undefined。或者，如果您的clickHandler函数永远不会被调用，或者永远不会到达可以创建robot的点，那么robot甚至可能不存在。

如果您将HTML中的class=...更改为id=...，则可以使用此功能：

$("#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); });

更新： var robot与clickhandler绑定范围。因此，您无法从控制台访问它，因为控制台不在该范围内。要解决这个问题，请在javascript中定义全局变量var robot;（global =在任何函数或块之外的某个地方{}}。
并将点击处理程序的最后一行更改为：

robot = new Robot(robotName, robotColor, robotBuild);

然后，您应该可以从控制台访问robot.name和其他参数。

Answer 5

Your code works for me.
http://jsfiddle.net/awakeningbyte/2wroeuL2/2/

但是，我注意到你将变量定义为var travis，而你说'＃34; Travis未定义＆＃34;。这是一个错字吗？

在函数中插入输入值作为参数不起作用

5 个答案: