update

04-dom-events-async/11-input-live-preview/starter.js

@@ -4,3 +4,26 @@
 // 3. 把输入内容实时渲染到右侧预览
 // 4. 监听阶段下拉框的 change 事件
 // 5. 更新阶段标签文字
+const nickname = document.getElementById("nickname-input")
+const goal = document.getElementById("goal-input")
+const stage = document.getElementById("stage-select")
+
+nickname.addEventListener("input", function () {
+  const previewName = document.getElementById("preview-name")
+  previewName.textContent = nickname.value
+  if (!nickname.value.trim()) {
+    previewName.textContent = "未填写昵称"
+  }
+})
+goal.addEventListener("input", function () {
+  const previewGoal = document.getElementById("preview-goal")
+  previewGoal.textContent = goal.value
+  if (!goal.value.trim()) {
+    previewGoal.textContent = "这里会显示你的学习目标。"
+  }
+})
+
+stage.addEventListener("change", function () {
+  const previewStage = document.getElementById("preview-stage")
+  previewStage.textContent = stage.value
+})