通过原型问题 javascript 添加方法

Question

我必须通过原型添加一个属性和方法。 我的代码处于工作状态，但它没有基于用户输入的属性值，而是将自行车阵列 [0].color 显示为未定义。 我认为我没有正确调用方法函数，或者我没有正确定义它。 我有点困惑，我在这里做错了什么。

HTML :

<div id="requirement_13">
    <h3>Requirment 13 - 14</h3>
    <p id="bike"></p>
    <ul id="speed_info">
        <li>Our bike gears can be customized to achieve certain speed possibilities.</li>
        <li>The standard gearing speed is 12mph.</li>
        <li>If you would like something different, please select a number below to either<br>
                add or subtract from max gear speed.</li>
        <li>We will handle the rest from there.<br></li>
    </ul>
    <form>      
    <input type="number" id="speed" min="-6" max="15" required>
    </form>
    <ul>
        <li> Our standard bike color is "Gun Metal Grey"</li>
        <li> You can select a bike color from below if<br>
            you wish to change the color.</li>
    </ul>
    <form id="bike_color">
        <select name="change_color:">
            <option value="Gun Metal Grey" selected>Gun Metal Grey</option>
            <option value="Cherry Red">Cherry Red</option>
            <option value="Sky Runner Blue">Sky Runner Blue</option>
            <option value="Rose Pink">Rose Pink</option>
            <option value="Plum Purpler">Plum Purpler</option>
        </select>
        <br>
        <br>
        <input type="button" id="gear_submit" value="Submit" onclick="createBike();">
        <p id="show_bike"></p>
    </form>
</div>

JavaScript：

//global bike array
var bikeArray = [];

function createBike() {
    function bike(model, speed) {
        this.model = model;
        this.speed = speed;

        // this will change speed based on user input
        this.changeSpeed = function (changeSpeed) {
            var new_speed = parseInt(document.getElementById("speed").value, 10);
            bikeArray[0].speed = speed + new_speed;
        }
    }

    var bike1 = new bike("Ghost Ryder", 12);
    bikeArray[0] = bike1;

    bike1.changeSpeed();

// add the color property and method to set the value of color
    bike.prototype.color;
    bike.prototype.color = function (colorPicker){
        var color = document.getElementsByName("change_color").value;
        bike1.color = color;    
     }

     bike1.color();

    document.getElementById("show_bike").innerHTML =
    bikeArray[0].model + " " + bikeArray[0].speed + " " + bikeArray[0].color;
}

我的输出看起来像这样：Ghost Ryder 14 undefined

在未定义的地方，我需要它来显示用户选择的颜色。

代码笔示例

Answer 1

首先，您的选择元素名称中有一个错字：

<select name="change_color:">需要是<select name="change_color"> ，因为这是您在代码中引用它的方式。

其次getElementsByName返回具有该名称的所有元素的列表，而不是：

document.getElementsByName("change_color").value

你需要使用：

document.getElementsByName("change_color")[0].value

通过这些更改，颜色不再显示为未定义。

更新，工作 CodePen： http ://codepen.io/maxlaumeister/pen/xwZbMG

Answer 2

这是一些修改后的代码：

var bikeArray = [];

function createBike() {
    function bike(model, speed) {
        this.model = model;
        this.speed = speed;

        // this will change speed based on user input
        this.changeSpeed = function () {
            var new_speed = 2; // just literal for simplicity
            bikeArray[0].speed = speed + new_speed;
        }
    }

    var bike1 = new bike("Ghost Ryder", 12);
    bikeArray[0] = bike1;

    bike1.changeSpeed();

    // add the color property and method to set the value of color
    bike.prototype.color = function (){
        var color = "green";// just literal for simplicity
        this.mycolor = color;    // use this, not bike1 and color is the function, don't override!
     }

     bike1.color();

    console.log(
    bikeArray[0].model + " " + bikeArray[0].speed + " " + bikeArray[0].mycolor);
}

createBike();