Добавление элементов div в массив нажатием кнопки

Страница, над которой я работаю, содержит элемент div с идентификатором «экзамен», кнопку с идентификатором «копировать» и вторую кнопку с идентификатором «массив». Элемент div содержит текст «Экзамен 1», и при нажатии кнопки «Копировать» этот div дублируется каждый раз, когда нажимается кнопка. Предполагается, что кнопка «массив» добавляет каждый из этих «экзаменов» в массив и использует функцию предупреждения для отображения длины массива. Я не могу понять, как использовать эти элементы 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

Ах, да, чтобы предотвратить воссоздание массива при каждом нажатии кнопки, я могу просто объявить массив вне функции? –

Я бы добавил имя класса к экзамену 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

Удивительно, это работает. Огромное спасибо! –

Мое удовольствие. :-) – JME

Некоторые предложения и то, что вы, возможно, может исходить от: Во-первых, Ид атрибуты должны быть уникальными, так что было бы лучше использовать имена классов:

<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, каждый раз, когда вы нажимаете «Get Array». Затем массив должен быть определен в функции makeArray().
Чтобы избежать наличия в массиве тех же разделов, что и в случае удвоения, в случае глобального определения, например, можно добавить атрибут данных с помощью счетчика для каждого вновь созданного div и при создании массива второй раз добавить только новые. Или было бы возможно добавить каждый новый div в массив, когда он будет добавлен с помощью TTexam.push(TTclone); в функции copy().

источник

2014-09-27 01:35:46

Добавление элементов div в массив нажатием кнопки

ответ

Смежные вопросы