如何修改JavaScript代码使其在页面加载时运行而非change事件触发

你的代码在输入框change事件触发时能正常显示对应天数的div，但页面加载时没法用输入框的默认值自动执行逻辑。之前直接替换事件类型的方法没用，因为加载事件没有change事件里的e.target对象，原来的逻辑完全依赖这个目标元素，所以得重构代码来复用逻辑。

解决方案步骤 #

1. 封装复用逻辑：把处理单个输入框的代码抽成独立函数，不管是页面加载还是输入框变化，都能调用这个函数。
2. 修复HTML规范问题：多个元素用了同一个id="daycol"，这不符合HTML id唯一的规范，改成class="daycol"。
3. 页面加载初始化：在DOM加载完成后，遍历所有目标输入框，调用处理函数完成初始显示。

修改后的完整代码 #

修正后的HTML

<strong>SET 01</strong><br>
<section>
<label>Days (enter value 1 to 6): </label>
<input type="text" name="numberofdaysperchosenfrequency" value="1">
<div data-id="1" class="daycol hide">Day 1</div>
<div data-id="2" class="daycol hide">Day 1 / Day 2</div>
<div data-id="3" class="daycol hide">Day 1 / Day 2 / Day 3</div>
<div data-id="4" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4</div>
<div data-id="5" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
<div data-id="6" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4 / Day 5 / Day 6</div>
</section>

<br><hr><br>

<strong>SET 02</strong><br>
<section>
<label>Days (enter value 1 to 6): </label>
<input type="text" name="numberofdaysperchosenfrequency" value="6">
<div data-id="1" class="daycol hide">Day 1</div>
<div data-id="2" class="daycol hide">Day 1 / Day 2</div>
<div data-id="3" class="daycol hide">Day 1 / Day 2 / Day 3</div>
<div data-id="4" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4</div>
<div data-id="5" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4 / Day 5</div>
<div data-id="6" class="daycol hide">Day 1 / Day 2 / Day 3 / Day 4 / Day 5 / Day 6</div>
</section>

调整后的JavaScript

// 封装处理单个输入框的逻辑
function updateDayDisplay(input) {
  const parent = input.parentNode;
  // 隐藏所有天数div
  parent.querySelectorAll('.daycol').forEach(n => n.style.display = 'none');
  // 如果输入有值，显示对应div
  if (input.value) {
    parent.querySelector(`[data-id="${input.value}"]`).style.display = 'block';
  }
}

// 页面DOM加载完成后，初始化所有输入框的显示状态
document.addEventListener('DOMContentLoaded', () => {
  const inputs = document.querySelectorAll('input[name="numberofdaysperchosenfrequency"]');
  inputs.forEach(input => updateDayDisplay(input));
});

// 保留change事件监听，输入变化时更新显示
document.addEventListener('change', e => {
  if (e.target.name === 'numberofdaysperchosenfrequency') {
    updateDayDisplay(e.target);
  }
});

逻辑说明 #

• 抽离的updateDayDisplay函数负责处理单个输入框的显示逻辑，参数是输入框元素，避免重复代码。
• DOMContentLoaded事件确保DOM完全加载后再获取元素，不会出现找不到输入框的情况。
• 修复id重复问题后，代码更符合HTML规范，也避免了选择器匹配异常的潜在问题。

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