JavaScript函数问题求助：点击按钮无法拆分日期填充至对应输入框

看起来你的函数没生效大概率是几个常见的小问题导致的，我帮你梳理下排查方向，再给你一个可运行的示例参考：

常见问题点及解决 #

• 元素没有唯一标识，JS无法准确定位：你的代码片段里没看到输入框和按钮的id属性，这会导致JS获取不到对应的DOM元素，自然没法执行操作。给每个元素加上唯一id是最稳妥的做法。
• 点击事件未正确绑定：按钮的点击事件要么没绑定，要么绑定方式有误，比如忘记给按钮加onclick属性，或者用addEventListener时写错了元素选择器。
• 日期拆分逻辑有误：如果拆分时没处理好分隔符，或者索引搞反了（比如把年当成日赋值），也会出现看起来没生效的情况。
• 目标输入框不存在：要确保页面上确实有用于存放日、月、年的三个输入框，并且能被JS正确获取。

可运行的示例代码 #

<!DOCTYPE html>
<html>
<head></head>
<body>
  <!-- 源日期输入框 -->
  <input type="text" id="sourceDate" value="20/12/2015" />
  <!-- 触发按钮 -->
  <button onclick="splitDate()">拆分日期</button>
  <br>
  <!-- 目标输入框 -->
  日：<input type="text" id="dayInput" />
  月：<input type="text" id="monthInput" />
  年：<input type="text" id="yearInput" />

  <script>
    function splitDate() {
      // 获取源日期输入框的值
      const sourceValue = document.getElementById('sourceDate').value;
      // 按/拆分日期，得到日、月、年的数组
      const dateParts = sourceValue.split('/');
      
      // 判断拆分是否有效（确保是三个部分）
      if (dateParts.length === 3) {
        // 给对应的输入框赋值，注意顺序是日/月/年
        document.getElementById('dayInput').value = dateParts[0];
        document.getElementById('monthInput').value = dateParts[1];
        document.getElementById('yearInput').value = dateParts[2];
      } else {
        alert('请输入正确的日期格式（日/月/年）');
      }
    }
  </script>
</body>
</html>

对比你的代码排查 #

你可以对照上面的示例，检查自己的代码：

1. 是不是所有需要操作的元素都加了id？
2. 按钮的点击事件有没有正确关联到你的函数？
3. 拆分日期后，赋值的目标输入框是不是正确的？
4. 有没有处理日期格式不正确的情况（比如用户输入了非/分隔的内容）？

如果还有问题，可以把完整的代码贴出来，我再帮你进一步排查~

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