使用JavaScript将日期文本复制到文本框时显示undefined的问题求助

我来帮你排查下代码里的问题，正是这些细节导致点击按钮后文本框显示undefined：

核心问题梳理 #

• 重复ID冲突：你的HTML里<p>标签和内部的<span>都用了id="datetime"，但ID在页面中必须唯一，浏览器只会识别第一个匹配的元素，直接导致后续操作混乱。
• 错误的内容获取方式：<p>这类普通元素没有value属性（value是input等表单元素专属），用date1.value获取内容自然会得到undefined，应该用textContent或innerHTML来读取元素内的文本。
• 初始化目标错误：你初始化日期时修改的是重复ID的第一个元素（也就是<p>），但实际应该把日期放到内部的<span>里。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<p style="position:absolute;margin-top:80px;font-weight:bold">
  <span id="datetime" name="datetime"></span>
</p>
<input type="text" id="textfield1" name="textfield1">
<input type="submit" onclick="ShowHideDiv()" value="copy">

<script>
function ShowHideDiv() { 
  var dateEl = document.getElementById("datetime"); 
  var textField = document.getElementById("textfield1"); 
  textField.value = dateEl.textContent; // 用textContent安全获取文本
}

// 初始化日期到唯一的span元素
var dt = new Date(); 
document.getElementById("datetime").textContent = dt.toISOString().substr(0, 10);
</script>
</body>
</html>

关键修复点 #

1. 移除了<p>标签的重复ID，只保留<span>的唯一id="datetime"
2. 将获取内容的方式从value改为textContent（如果元素内有HTML结构可以用innerHTML，纯文本场景下textContent更安全）
3. 初始化日期时也统一用textContent设置文本，保持逻辑一致性

这样修改后，点击复制按钮就能正常把日期复制到文本框里了！

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