2017-05-05 75 views
-1

這是我的jS代碼。當我按下按鈕時,我想要添加值爲1的另一個元素。現在它正在重置數組,所以我永遠不會獲得多個元素。我在這裏做什麼?javascript數組推不工作

var x = document.getElementsByTagName('button');//return button array 
var age_array = []; 
    smoker_array = []; 
    relation_array = []; 

    age = 0; 

//add button clicked 
x[0].addEventListener("click", function(){ 

    /* 
    var age = document.getElementsByName("age")[0].value;//pull age from box 
    var relation = document.getElementsByName("rel")[0].value;//pull relation 
    let smoker = document.querySelector('[name=smoker').checked; 

    //check relation 
    if(relation === "") 
    { 
     alert("please select a realation"); 
    } 

    //check to see if age < 0 
    if(age < 0 || age === " ") 
    { 
     alert("age not applicable"); 
    } 
    */ 


    age_array.push(1); 
    alert(age_array.length); 


}); 

/*function submit(age, relation, smoker) 
{ 
    age_array.push(age); 

    alert(age_array[0]); 
    alert(age_array[1]); 
    /* 
    x[1].addEventListener("click", function(){ 
     var age = JSON.stringify(entry_age); 
     alert(entry_age[1]); 
     document.getElementbyClassName("debug").innerHTML = JSON.stringify(entry_relation); 
     document.getElementByClass("debug").innerHTML = JSON.stringfy(entry_smoker); 
    }); 
} 
    */ 

下面是HTML代碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Household builder</title> 
     <style> 
      .debug { 
       font-family: monospace; 
       border: 1px solid black; 
       padding: 10px; 
       display: none; 
      } 
     </style> 
    </head> 
    <body> 
     <h1>Household builder</h1> 
     <div class="builder"> 
      <ol class="household"></ol> 
      <form> 
       <div> 
        <label>Age 
         <input type="text" name="age"> 
        </label> 
       </div> 
       <div> 
        <label>Relationship 
         <select name="rel"> 
          <option value="">---</option> 
          <option value="self">Self</option> 
          <option value="spouse">Spouse</option> 
          <option value="child">Child</option> 
          <option value="parent">Parent</option> 
          <option value="grandparent">Grandparent</option> 
          <option value="other">Other</option> 
         </select> 
        </label> 
       </div> 
       <div> 
        <label>Smoker? 
         <input type="checkbox" name="smoker"> 
        </label> 
       </div> 
       <div> 
        <button class="add">add</button> 
       </div> 
       <div> 
        <button type="submit">submit</button> 
       </div> 
      </form> 
     </div> 
     <pre class="debug"></pre> 
     <script type="text/javascript" src="index.js"></script> 
    </body> 
</html> 
+0

你的代碼 - 也許你已經修剪了太多的實際代碼,以顯示你在做什麼錯 –

+0

並警告彈出哪怕是錯的?如果沒有,你可能試圖給尚未加載的元素分配一個處理程序。 – Bindrid

+0

將您的代碼作爲可運行代碼片段發佈的一個原因是看它是否按照您所說的那樣做。 ;-)投票結束爲「無法複製」。 – RobG

回答

0

我不知道這是否是原因,但你的代碼將無法在嚴格模式工作。

var age_array = []; 
    smoker_array = []; 
    relation_array = []; 

應該是:

var age_array = [], 
    smoker_array = [], 
    relation_array = []; 

或:

var age_array = []; 
var smoker_array = []; 
var relation_array = []; 
+0

謝謝,我試過了,但是仍然沒有工作 –

+0

對於'''var age = 0;'''是一樣的。當你說它*不起作用時,會發生什麼?你能看到警報還是看起來沒有任何反應?如果是這樣,請隨意將代碼封裝到一個'''try {...} catch(e){alert(e.toString()); }''' - 或者等價的。 – gabriel

+0

即使它處於嚴格模式,也會導致錯誤,而不是問題中描述的行爲。 – nnnnnn

0

嘿感謝幫助傢伙。 HTML似乎有問題。我不知道是什麼。我得到了JS使用我自己的HTML工作,並且我不允許更改HTML。無論如何感謝你們所有的幫助。

標記此作爲如圖不會重置陣列回答