通過原型問題添加方法javascript

Question

我必須通過原型添加屬性和方法。我有我的代碼工作順序，但沒有基於用戶輸入的屬性值，它顯示bikeArray [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; 
} 

我出去放看起來是這樣的：幽靈萊德14未定義

，其中不確定的是，我需要它來顯示用戶選擇顏色。

codepen example

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();