Я делаю веб-страницу и пытаюсь реализовать простую модальную страницу с помощью JavaScript. Что я делаю, так это определяю функцию JS onClick(element) которая читает значения атрибутов элемента и передает их целевым элементам, которые находятся на модальной странице.

И я сделал функцию, вызываемую при нажатии на конкретный элемент, добавив атрибут onclick="onClick(this)" .

Функция работает очень хорошо, за исключением всех частей, таких как element.SOMETHING возвращает «Undefined». Как я могу это исправить???

  {amp}lt;div class="acw3-quarter acw3-panel acw3-padding-16" onclick="onClick(this)" product_name="{{product.name}}" sub_category="{{subs.name}}" category="{{category.name}}" description="{{product.description}}" i0="{{ product.image_main.url }}" {% if product.image_1 %} i1="{{ product.image_1.url }}" {% endif %} {% if product.image_2 %} i2="{{ product.image_2.url }}" {% endif %} {% if product.image_3 %} i3="{{ product.image_3.url }}" {% endif %} {% if product.image_4 %} i4="{{ product.image_4.url }}" {% endif %} {% if product.image_5 %} i5="{{ product.image_5.url }}" {% endif %} {amp}gt; 
  {amp}lt;div class="acw3-modal-content acw3-animate-zoom acw3-center acw3-transparent acw3-padding-64" {amp}gt; {amp}lt;h2 id="category"{amp}gt;{amp}lt;/h2{amp}gt; {amp}lt;h3 id="sub_category"{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;img id="img0" class="acw3-image" /{amp}gt; {amp}lt;h4 id="product_name" class="acw3-opacity acw3-large"{amp}gt;{amp}lt;/h4{amp}gt; {amp}lt;p id="description"{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;img id="img1" class="acw3-image" /{amp}gt; {amp}lt;img id="img2" class="acw3-image" /{amp}gt; {amp}lt;img id="img3" class="acw3-image" /{amp}gt; {amp}lt;img id="img4" class="acw3-image" /{amp}gt; {amp}lt;img id="img5" class="acw3-image" /{amp}gt; {amp}lt;/div{amp}gt; 
  • И, наконец, это функция JS.
  function onClick(element) { document.getElementById("img0").src = element.i0; document.getElementById("img1").src = element.i1; document.getElementById("img2").src = element.i2; document.getElementById("img3").src = element.i3; document.getElementById("img4").src = element.i4; document.getElementById("img5").src = element.i5; var categoryText = document.getElementById("category"); var subsText = document.getElementById("sub_category"); var nameText = document.getElementById("product_name"); var descriptionText = document.getElementById("description"); categoryText.innerHTML = element.category; subsText.innerHTML = element.sub_category; nameText.innerHTML = element.product_name; descriptionText.innerHTML = element.description; document.getElementById("modal01").style.display = "block"; } 

Вот то, что эти коды оказали.

 {amp}lt;div class="acw3-modal-content acw3-animate-zoom acw3-center acw3-transparent acw3-padding-64"{amp}gt; {amp}lt;h2 id="category"{amp}gt;undefined{amp}lt;/h2{amp}gt; {amp}lt;h3 id="sub_category"{amp}gt;undefined{amp}lt;/h3{amp}gt; {amp}lt;img id="img0" class="acw3-image" src="undefined"{amp}gt; {amp}lt;h4 id="product_name" class="acw3-opacity acw3-large"{amp}gt;undefined{amp}lt;/h4{amp}gt; {amp}lt;p id="description"{amp}gt;undefined{amp}lt;/p{amp}gt; {amp}lt;img id="img1" class="acw3-image" src="undefined"{amp}gt; {amp}lt;img id="img2" class="acw3-image" src="undefined"{amp}gt; {amp}lt;img id="img3" class="acw3-image" src="undefined"{amp}gt; {amp}lt;img id="img4" class="acw3-image" src="undefined"{amp}gt; {amp}lt;img id="img5" class="acw3-image" src="undefined"{amp}gt; {amp}lt;/div{amp}gt; 

О, и я проверил, что части шаблона Django ( {% %} ) работают просто отлично; они заменены тем, что они должны быть. Кажется, что только JS-функции не могут читать значения с помощью element.SOMETING .