將div元素添加到按鈕上的數組單擊

我正在處理的頁面包含ID爲「exam」的div元素，ID爲「copy」的按鈕和ID爲「array」的第二個按鈕。 div元素包含文本「Exam 1」，當單擊「複製」按鈕時，每次點擊該按鈕時都複製該div。「數組」按鈕應該將每個「考試」div添加到一個數組，並使用alert函數來顯示數組的長度。我無法弄清楚如何在單擊按鈕時將這些div元素添加到數組中。將div元素添加到按鈕上的數組單擊

下面是HTML我到目前爲止（這也包括JavaScript和CSS）：

<html> 
    <head> 
     <title>Exam 1 Tanner Taylor</title> 
     <style type="text/css"> 
      #exam { 
       border: 2px double black; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="exam"> 
     Exam 1 
     </div> 
     <input type="button" id="copy" value="Make Copy" onclick="copy()" > 
     <input type="button" id="array" value="Get Array" onclick="makeArray()"> 
    </body> 

    <script type = "text/javascript"> 
      var TTi = 0; 
      var TToriginal = document.getElementById("exam"); 
      function copy() { 
       var TTclone = TToriginal.cloneNode(true); 
       TTclone.id = "exam"; 
       TToriginal.parentNode.appendChild(TTclone); 
      } 

      function makeArray() { 
       var TTexam[]; 
       for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) { 

       } 
      } 
     </script> 
</html>

還有更多，但我刪除實際上並沒有解決這一問題的部分。正如你所看到的，我已經開始了makeArray（）函數，但並不確定從哪裏開始，我覺得這是我需要最多幫助的功能。有什麼建議麼？

來源

2014-09-27 Beth Tanner

'var TTexam [];'是一個語法錯誤，應該是'var TTexam = [];'，並且每次單擊該按鈕時都會創建該數組，因此當嘗試迭代下一行上的數組時，它是空的？ – adeneo 2014-09-27 01:22:06

好吧，所以爲了防止每次單擊按鈕時重新創建數組，我可以在函數之外聲明數組嗎？ – 2014-09-27 01:35:35

我會爲考試div添加一個班級名稱，並使用getElementsByClassName()來獲取該班級的所有DIV。

HTML：

<body> 
    <div id="exam" class="exam"> 
     Exam 1 
    </div> 
    <input type="button" id="copy" value="Make Copy" onclick="makeCopy()" /> 
    <input type="button" id="array" value="Get Array" onclick="makeArray()" /> 
</body>

JS：

var TTi = 0; 
var TToriginal = document.getElementById("exam"); 

function makeCopy() { 
    console.log('copy'); 
    var TTclone = TToriginal.cloneNode(true); 
    TToriginal.parentNode.appendChild(TTclone); 
} 

function makeArray() { 
    var TTexam = document.getElementsByClassName("exam"); 
    alert(TTexam.length); 
    for(var TTindex = 0; TTindex < TTexam.length; ++TTindex) { 
     console.log(TTexam[TTindex]);   
    } 
}

，可隨時更換alert()和console.log()你想要的任何業務邏輯。

查看http://jsfiddle.net/JohnnyEstilles/w6fdm5th/的工作小提琴。

來源

2014-09-27 01:35:57 JME

真棒，這個工程。謝謝一堆！ – 2014-09-27 02:16:18

我的榮幸。 :-) – JME 2014-09-27 02:18:50

一些建議和一些你也許可以從着手：首先，ID-屬性應該是唯一的，所以它會是更好地使用類名：

<div class="exam">Exam 1</div> 
<input type="button" id="copy" value="Make Copy" onclick="copy()"> 
<input type="button" id="array" value="Get Array" onclick="makeArray()">

對於腳本：

var TTexam = []; 

function copy() { 
    var TToriginal = document.getElementsByClassName("exam")[0]; 
    var TTclone = TToriginal.cloneNode(true); 
    TToriginal.parentNode.appendChild(TTclone); 
} 

function makeArray() { 
    alert(TTexam.length); 
    for (var TTindex = 0; TTindex < document.getElementsByClassName("exam").length;  TTindex++) 
    { 
    TTexam.push(document.getElementsByClassName("exam")[TTindex]); 
    } 
    alert(TTexam.length); 
}

這只是爲了初學者。 TTexam是一個全局定義的數組，以防萬一它可以被這兩個函數訪問。但問題確實是你想要做什麼 - 如果你想在添加div時只生成一次數組，或者每次單擊「獲取數組」時應該可以生成一個包含所有div的新數組。然後該陣列應在makeArray()-功能中定義。
爲了避免在全局定義的情況下在數組中使用與doubles相同的div，可以爲每個新創建的div添加一個帶有計數器的數據屬性，並且在第二次創建數組時，只添加新的數組。或者可以在copy()功能中使用TTexam.push(TTclone);添加每個新的div到陣列中。

來源

2014-09-27 01:35:46

將div元素添加到按鈕上的數組單擊

回答

相關問題