概述：基于用户输入的动态内容展示
在网页开发中，根据用户的交互动态更新页面内容是常见的需求。本教程将通过一个具体示例，演示如何根据用户在输入框中输入的值，在页面上显示不同的图片，并提供一个按钮来清除显示的内容。我们将重点关注JavaScript中正确的DOM操作方法和现代编码实践。
HTML结构基础
首先，我们需要一个基本的HTML结构，包含一个输入框、两个按钮和一个用于显示内容的段落元素。
动态图片展示
|
在此显示图片 |
在这个HTML结构中：
- input1 是用户输入数字的文本框。
- leftButton 按钮点击后会触发 fruitTest() 函数，根据输入值显示图片。
- middleCell 是一个
元素，用于动态显示图片。
- clearButton 按钮点击后会触发 clearBox() 函数，清除 middleCell 中的内容。
JavaScript实现：核心逻辑与最佳实践
接下来，我们将编写JavaScript代码来实现上述功能。这里我们将介绍一种更健壮、更符合现代JavaScript实践的方法。
立即学习“Java免费学习笔记（深入）”；
1. 定义图片URL和获取DOM元素
首先，定义两张图片的URL，并获取需要操作的DOM元素。推荐使用 const 声明常量，以提高代码的可读性和维护性。
// script.js
const appleImgUrl = "https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af";
const pearImgUrl = "https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e";
// 获取需要操作的DOM元素
const middleCell = document.getElementById('middleCell');2. 实现 fruitTest() 函数：动态显示图片
fruitTest() 函数负责根据用户输入的值来判断显示哪张图片。这里我们将采用 document.createElement() 方法来创建 元素，而不是直接拼接HTML字符串。这种方法更安全、更灵活，并且在处理复杂DOM结构时性能更好。
function fruitTest() {
const myInput = document.getElementById('input1');
const inputValue = parseInt(myInput.value); // 将输入值转换为整数
// 清除 previous content to avoid multiple images if re-triggering
middleCell.innerHTML = '';
// 检查输入值是否有效
if (isNaN(inputValue)) {
middleCell.textContent = "请输入有效的数字！";
return;
}
const img = document.createElement('img'); // 创建一个新的@@##@@元素
if (inputValue > 100) {
img.src = appleImgUrl; // 设置苹果图片的URL
img.alt = "苹果图片"; // 设置alt属性，提高可访问性
} else if (inputValue < 0) {
img.src = pearImgUrl; // 设置梨子图片的URL
img.alt = "梨子图片"; // 设置alt属性
} else {
middleCell.textContent = "请输入大于100或小于0的数字。";
return;
}
// 将创建的图片元素添加到 middleCell 中
middleCell.appendChild(img);
}关键改进点：
- innerHTML vs innerHtml： 原始代码中存在拼写错误 innerHtml。JavaScript DOM属性是大小写敏感的，正确的属性名是 innerHTML。
- 使用 document.createElement()： 相较于直接将HTML字符串赋值给 innerHTML，document.createElement('img') 创建元素然后设置其 src 属性是更推荐的做法。这避免了潜在的XSS攻击风险（虽然在本例中风险较低，但养成好习惯很重要），并且在DOM操作上更为精确和高效。
- appendChild()： 创建元素后，使用 appendChild() 方法将其添加到父元素中。
- parseInt()： 获取输入框的值通常是字符串类型，需要使用 parseInt() 或 Number() 将其转换为数字进行比较。
- 输入校验： 增加了 isNaN() 检查，确保用户输入的是有效数字。
- 清除旧内容： 在添加新图片之前，通过 middleCell.innerHTML = ''; 清除 middleCell 中已有的内容，避免重复显示图片。
3. 实现 clearBox() 函数：清除内容
clearBox() 函数相对简单，只需将 middleCell 的 innerHTML 属性设置为空字符串即可。
function clearBox() {
middleCell.innerHTML = ''; // 清空 middleCell 的内容
// 也可以选择恢复初始文本
// middleCell.textContent = "在此显示图片";
}完整的JavaScript代码
将上述代码整合到 script.js 文件中：
// script.js
const appleImgUrl = "https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af";
const pearImgUrl = "https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e";
const middleCell = document.getElementById('middleCell');
function fruitTest() {
const myInput = document.getElementById('input1');
const inputValue = parseInt(myInput.value);
middleCell.innerHTML = ''; // 清除现有内容
if (isNaN(inputValue)) {
middleCell.textContent = "请输入有效的数字！";
return;
}
const img = document.createElement('img');
let imgSet = false; // 标记是否设置了图片
if (inputValue > 100) {
img.src = appleImgUrl;
img.alt = "苹果图片";
imgSet = true;
} else if (inputValue < 0) {
img.src = pearImgUrl;
img.alt = "梨子图片";
imgSet = true;
} else {
middleCell.textContent = "请输入大于100或小于0的数字。";
}
if (imgSet) {
middleCell.appendChild(img);
}
}
function clearBox() {
middleCell.innerHTML = '';
middleCell.textContent = "在此显示图片"; // 清除后恢复初始提示文本
}总结与注意事项
通过本教程，我们学习了如何利用JavaScript和DOM操作实现基于用户输入的动态内容展示。
关键学习点：
- DOM属性大小写敏感： 务必使用正确的属性名，例如 innerHTML 而非 innerHtml。
- 现代JavaScript语法： 优先使用 const 和 let 替代 var 来声明变量，以优化作用域管理和防止意外的变量重声明。
- 安全的DOM操作： 推荐使用 document.createElement() 和 appendChild() 来动态创建和添加元素，这比直接操作 innerHTML 字符串更安全、更灵活，并能更好地控制DOM结构。
- 数据类型转换： 从表单输入获取的值通常是字符串，需要根据需要使用 parseInt()、parseFloat() 或 Number() 进行类型转换。
- 用户输入校验： 在处理用户输入时，进行必要的校验（如 isNaN）以确保程序的健壮性。
- 清除旧内容： 在动态添加新内容前，通常需要清除目标元素中的旧内容，以避免重复或错乱。
掌握这些技术将帮助您构建更具交互性和用户友好性的网页应用。
