网页文本预览功能失效求助：自定义preview box无输出

你的预览区域无输出主要源于两个核心问题，以下是对应的修复方案：

1. JavaScript执行时机错误 #

如果你的JS代码放在HTML文档的<head>标签内，此时DOM还未完全加载完成，document.getElementById无法获取到目标元素，导致所有事件监听和预览更新逻辑全部失效。

修复方式二选一：

• 把JS代码移到HTML文档的<body>标签末尾（</body>之前），确保DOM元素先加载再执行JS；
• 用DOMContentLoaded事件包裹所有JS逻辑，强制等待DOM加载完成后再初始化：

document.addEventListener('DOMContentLoaded', function() {
  // 原有的所有JS代码都放在这个函数内部
});

2. 预览文本初始为空 #

默认状态下preview-text的内容是空的，用户未输入文本时看不到任何内容，建议添加默认占位文本。

修复方案：
修改HTML中的preview-text元素，添加默认内容：

<div id="preview-text">请输入文本预览</div>

额外优化建议 #

• 你的代码里有个updateOutput函数，其中引用了outputText元素，但HTML中并没有这个元素，会导致控制台报错，可直接删除该函数；
• 给字号滑块添加实时数值显示，让用户能直观看到当前字号大小；

修改后的完整可运行代码 #

HTML

<div>
  <form>
    <label for="font-select">选择字体:</label>
    <select id="font-select">
      <option value="Arial">Arial</option>
      <option value="Comic Sans MS">Comic Sans MS</option>
      <option value="Courier New">Courier New</option>
      <option value="Georgia">Georgia</option>
      <option value="Impact">Impact</option>
      <option value="Lucida Console">Lucida Console</option>
      <option value="Tahoma">Tahoma</option>
      <option value="Times New Roman">Times New Roman</option>
      <option value="Verdana">Verdana</option>
    </select>
  </form>

  <form>
    <label for="size-input">选择字号:</label>
    <input id="size-input" type="range" min="10" max="100" value="50">
    <span id="size-value">50px</span>

    <label for="color-picker">选择颜色:</label>
    <input id="color-picker" type="color" value="#ff0000">

    <label>
      <input id="light-toggle" type="checkbox">
      发光效果
    </label>
  </form>

  <form>
    <label for="text-input">输入文本:</label>
    <input id="text-input" type="text" placeholder="在此输入文本">
  </form>
</div>

<div id="preview-box">
  <div id="preview-text">请输入文本预览</div>
</div>

<script>
const fontSelect = document.getElementById("font-select");
const sizeInput = document.getElementById("size-input");
const sizeValue = document.getElementById("size-value");
const colorPicker = document.getElementById("color-picker");
const lightToggle = document.getElementById("light-toggle");
const previewText = document.getElementById("preview-text");
const textInput = document.getElementById("text-input");

function updatePreview() {
  const font = fontSelect.value;
  const size = sizeInput.value;
  const color = colorPicker.value;
  const text = textInput.value || previewText.textContent;

  previewText.style.fontFamily = font;
  previewText.style.fontSize = size + "px";
  previewText.style.color = color;
  if (text) previewText.textContent = text;
  
  sizeValue.textContent = size + "px";

  lightToggle.checked 
    ? previewText.classList.add("light-emitting") 
    : previewText.classList.remove("light-emitting");
}

fontSelect.addEventListener("change", updatePreview);
sizeInput.addEventListener("input", updatePreview);
colorPicker.addEventListener("change", updatePreview);
lightToggle.addEventListener("change", updatePreview);
textInput.addEventListener("input", updatePreview);

// 初始化预览状态
updatePreview();
</script>

CSS

#preview-box {
  border: 1px solid black;
  width: 400px;
  height: 100px;
  text-align: center;
  padding-top: 30px;
  font-size: 50px;
  background-color: black;
}

#preview-text {
  color: white;
}

.light-emitting {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

#size-value {
  margin-left: 8px;
  color: #333;
}

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