Question

我正在制作一个网页，并尝试使用javascript实现一个简单的模式页面。我正在做的是定义JS函数onClick(element)，该函数读取元素的属性值并将其传递给模态页面上的目标元素。

然后我通过添加属性onclick="onClick(this)"来使单击特定元素时调用该函数。

该函数运行正常，除了element.SOMETHING之类的所有部分都返回“未定义”。我该如何解决？？

这是按钮div

      <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 %}
      >

这是模式div

  <div
    class="acw3-modal-content acw3-animate-zoom acw3-center acw3-transparent acw3-padding-64"
  >
    <h2 id="category"></h2>
    <h3 id="sub_category"></h3>
    <img id="img0" class="acw3-image" />
    <h4 id="product_name" class="acw3-opacity acw3-large"></h4>
    <p id="description"></p>
    <img id="img1" class="acw3-image" />
    <img id="img2" class="acw3-image" />
    <img id="img3" class="acw3-image" />
    <img id="img4" class="acw3-image" />
    <img id="img5" class="acw3-image" />
  </div>

最后，这是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";
  }

这是这些代码的呈现方式。

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

哦，我检查了Django模板部件（{% %}）是否工作正常；它们代替了应有的样子。似乎只有JS函数无法使用element.SOMETING读取值。

Javascript模态页面函数“未定义”问题

0 个答案: