如何使用Javascript修改年龄验证弹窗的按钮显示文本

你可以通过选中对应id的按钮元素，直接修改其value属性实现文本修改，以下是具体实现方案：

基础实现（弹窗元素页面加载时已存在） #

直接通过元素唯一ID获取按钮，修改value值即可：

// 修改确认进入按钮文本，可自行替换引号内的自定义内容
document.getElementById('confirm_age').value = '我已满18周岁，进入网站';
// 修改拒绝进入按钮文本
document.getElementById('not_confirm_age').value = '我未满18周岁，退出';

兼容动态加载弹窗的实现 #

如果你的弹窗插件是动态插入DOM元素（比如页面加载完成后延迟弹出、用户触发操作后才加载弹窗结构），直接执行上述代码会因找不到元素失效，可使用轮询检测元素存在性的方案：

function updateAgeBtnText() {
  const confirmBtn = document.getElementById('confirm_age');
  const cancelBtn = document.getElementById('not_confirm_age');
  // 两个按钮都加载完成后再执行修改
  if (confirmBtn && cancelBtn) {
    confirmBtn.value = '我已满18周岁，进入网站';
    cancelBtn.value = '我未满18周岁，退出';
    // 修改完成后清除定时器，避免不必要的性能消耗
    clearInterval(ageCheckTimer);
  }
}
// 每300毫秒检测一次元素是否加载完成
const ageCheckTimer = setInterval(updateAgeBtnText, 300);

代码部署说明 #

将上述代码添加到你网站的全局自定义脚本位置即可，通常部署在页脚</body>标签之前生效优先级最高。如果只能部署在页面头部，可将代码包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', function() {
  // 把上述实现代码放在这个回调函数内即可
});

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