将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元素添加到按钮上的数组单击

回答

相关问题