如何在Django循环中使用JavaScript动态修改<div>标签？

嘿，我来帮你搞定这个问题！你的思路没问题，但有几个小细节没处理到位，导致动态修改div内容失败，咱们一步步来修正：

你当前代码的问题 #

1. 执行顺序不对：你的脚本放在div标签前面，当JavaScript运行时，浏览器还没渲染出对应的div，所以getElementsByClassName根本找不到元素。
2. 元素获取方式有误：getElementsByClassName返回的是一个HTMLCollection集合（类似数组），哪怕只有一个匹配元素，也不能直接用.innerHTML，得通过索引（比如[0]）拿到单个元素才行。
3. 代码冗余：循环里重复生成脚本标签，不仅不优雅，还容易引发意外问题。

方案一：修正你的原有写法 #

把脚本移到div后面，确保元素已经渲染，同时处理集合的索引问题：

{% for resource in result_basic %}
<p>Property Ratings: <div class="pratings-{{forloop.counter}}"></div></p>
<script type="text/javascript">
// 现在div已经渲染完成，能正常获取到元素了
const ratingDivs = document.getElementsByClassName('pratings-{{forloop.counter}}');
if (ratingDivs.length > 0) {
  const loc_rating = "{{resource.loc_rating}}";
  const fac_rating = "{{resource.fac_rating}}";
  const tran_rating = "{{resource.tran_rating}}";
  // 计算平均值，顺便保留两位小数更美观
  const property_avg = ((Number(loc_rating) + Number(fac_rating) + Number(tran_rating)) / 3).toFixed(2);
  // 取集合里的第一个元素（也是唯一的那个）
  ratingDivs[0].innerHTML = property_avg;
}
</script>
{% endfor %}

方案二：更优雅的实现（推荐） #

把数据通过HTML的data-*属性传递，然后用一个统一的脚本处理所有元素，避免循环生成多个脚本：

{% for resource in result_basic %}
<p>Property Ratings: 
  <div class="pratings" 
       data-loc="{{resource.loc_rating}}"
       data-fac="{{resource.fac_rating}}"
       data-tran="{{resource.tran_rating}}">
  </div>
</p>
{% endfor %}

<script type="text/javascript">
// 等整个DOM加载完成后再执行，确保所有元素都能被找到
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带评分的div
  const allRatingDivs = document.querySelectorAll('.pratings');
  
  allRatingDivs.forEach(div => {
    // 从数据属性中读取数值
    const loc = Number(div.dataset.loc);
    const fac = Number(div.dataset.fac);
    const tran = Number(div.dataset.tran);
    
    // 处理可能的无效数值（比如空值、非数字）
    if (!isNaN(loc) && !isNaN(fac) && !isNaN(tran)) {
      const avg = ((loc + fac + tran) / 3).toFixed(2);
      div.innerHTML = avg;
    } else {
      div.innerHTML = 'N/A'; // 无效数据时显示占位符
    }
  });
});
</script>

额外提示 #

• 如果你的评分字段可能为空或者不是数字，一定要加isNaN的判断，避免页面出现NaN的尴尬情况。
• .toFixed(2)是用来保留两位小数，让平均值显示更规整，如果你不需要可以去掉。

内容的提问来源于stack exchange，提问作者deltacag