如何将week类型Input的值存入变量并输出至span标签？

你的代码问题在于：页面加载时只执行了一次取值和赋值操作，此时输入框还没有用户选择的内容，而且后续用户修改输入框值时，没有任何逻辑触发更新span的内容。

要实现实时同步，需要给week输入框添加事件监听，监听用户的输入/选择行为，每次触发时重新获取值并更新span：

完整实现代码 #

<input type="week" name="week" id="week-selector">
<span id="kalenderwoche"></span>

<script>
// 获取元素
const weekInput = document.getElementById("week-selector");
const kwSpan = document.getElementById("kalenderwoche");

// 定义更新函数
function updateWeekValue() {
  const kw = weekInput.value; // 将值存储到变量
  kwSpan.textContent = kw; // 更新span内容（推荐用textContent替代innerHTML更安全）
}

// 页面加载时如果输入框有默认值，先执行一次更新
updateWeekValue();

// 监听输入框的变化事件，用户选择后立即更新
weekInput.addEventListener("input", updateWeekValue);
// 也可以用change事件，区别是change在输入框失去焦点时触发，input是实时触发
// weekInput.addEventListener("change", updateWeekValue);
</script>

关键点说明 #

• 使用textContent替代innerHTML：如果只是纯文本内容，textContent更安全，避免XSS风险
• 监听input事件：用户选择周数时实时更新；如果需要在用户确认选择（比如点击其他地方）后再更新，改用change事件
• 页面加载时执行一次updateWeekValue：如果输入框有默认值（比如通过value属性预设），能直接显示到span里

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