如何实现可在HTML中调用的通用JavaScript函数，从变量更新文本

你的思路方向是对的，但有两个关键问题导致代码无法正常工作：

1. <div>元素不支持onload事件——这个事件仅适用于<body>、<img>、<script>等少数元素，所以你的函数根本不会被触发。
2. 原函数getActivityPoint只会修改第一个.share_points元素，没法针对每个div更新对应的值。

下面是修正后的完整实现方案：

步骤1：调整HTML结构 #

给每个目标div添加data-activity属性，用来关联你定义的ap变量中的键，这样我们能明确每个div对应哪个数值：

<div class="share_points" data-activity="movie_review">-</div>
<div class="share_points" data-activity="game_review">-</div>

步骤2：重写JavaScript函数 #

我们需要一个能遍历所有目标元素、并根据data-activity匹配对应数值的通用函数，同时确保在DOM加载完成后执行：

// 定义你的活动分数变量
var ap = {
    'movie_review':'20',
    'game_review':'15' // 可以随时添加更多活动
};

// 通用更新函数：遍历所有share_points元素并更新内容
function updateActivityPoints() {
    // 获取所有目标元素
    const pointElements = document.querySelectorAll('.share_points');
    
    // 逐个处理每个元素
    pointElements.forEach(element => {
        // 获取当前元素对应的活动名称
        const activityKey = element.getAttribute('data-activity');
        
        // 如果ap中存在对应的值，就更新元素内容；否则保留默认或设为0
        element.textContent = ap[activityKey] || '-';
    });
}

// 确保DOM完全加载后再执行更新（避免找不到元素的问题）
document.addEventListener('DOMContentLoaded', updateActivityPoints);

为什么这样更合理？ #

• 用data-*属性关联数据与元素：比在事件中传参更清晰，也方便后续维护（比如新增活动时，只需要添加ap的键和对应的div即可）。
• 遍历所有目标元素：解决了原函数只能修改第一个元素的问题，每个div都能获取到自己对应的数值。
• 使用textContent而非innerHTML：因为我们只是更新纯文本内容，textContent更安全（避免潜在的XSS风险），性能也更好。
• DOM加载完成后执行：通过DOMContentLoaded事件确保所有元素都已渲染完成，不会出现“找不到元素”的错误。

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