1. HTML结构准备
首先，我们需要一个基础的html结构来承载用户输入、触发操作的按钮以及显示动态内容的区域。以下是一个简单的表格布局，其中包含一个输入框、两个按钮和一个用于显示图片的段落元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态图片显示</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
#middleCell {
min-height: 50px; /* 确保有足够空间显示图片 */
display: flex;
align-items: center;
justify-content: center;
}
#middleCell img {
max-width: 100px; /* 限制图片大小 */
height: auto;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="number" id="input1" placeholder="输入一个数字">
<button id="leftButton" onclick="fruitTest();">提交</button>
</td>
<td>
<p id="middleCell">等待输入...</p>
</td>
<td>
<button id="clearButton" onclick="clearBox();">清除</button>
</td>
</tr>
</table>
<script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>在这个结构中：
- input1：用于接收用户输入的数字。
- leftButton：点击后会调用fruitTest()函数，根据输入值显示图片。
- middleCell：一个 <p> 元素，其内容将根据JavaScript逻辑动态更新为图片或清空。
- clearButton：点击后会调用clearBox()函数，清空middleCell的内容。
2. JavaScript核心逻辑：DOM操作与事件处理
JavaScript代码将负责获取HTML元素、监听用户交互事件、读取输入值，并根据条件动态地创建、修改或移除DOM元素。
// script.js
// 定义图片URL，使用 const 声明常量是现代JavaScript的最佳实践
const appleImgUrl = "https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af";
const pearImgUrl = "https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e";
// 获取需要操作的DOM元素
const middleCell = document.getElementById('middleCell');
const inputElement = document.getElementById('input1'); // 提前获取输入框元素
/**
* 根据用户输入的值，在 middleCell 中显示对应的图片。
*/
function fruitTest() {
// 获取输入框的当前值，注意 input.value 总是返回字符串，需要转换为数字进行比较
const inputValue = parseFloat(inputElement.value);
// 创建一个新的图片元素
const img = document.createElement('img');
let imageSet = false; // 标志位，表示是否设置了图片
if (inputValue > 100) {
img.src = appleImgUrl;
img.alt = "苹果图片"; // 添加alt属性以提高可访问性
imageSet = true;
} else if (inputValue < 0) {
img.src = pearImgUrl;
img.alt = "梨子图片"; // 添加alt属性以提高可访问性
imageSet = true;
} else {
// 如果输入不符合条件，可以清空或显示默认信息
middleCell.innerHTML = '请输入大于100或小于0的数字。';
return; // 不进行后续的图片插入操作
}
// 在插入新图片之前，先清空 middleCell 的所有现有内容
// 这是一个关键步骤，确保每次只显示一张图片
middleCell.innerHTML = '';
// 将创建的图片元素添加到 middleCell 中
if (imageSet) {
middleCell.appendChild(img);
}
}
/**
* 清空 middleCell 的内容。
*/
function clearBox() {
middleCell.innerHTML = '';
// 清空输入框的值
inputElement.value = '';
// 恢复默认提示
middleCell.innerHTML = '等待输入...';
}代码解析与改进点：
- 变量声明： 推荐使用 const 声明常量（如图片URL和DOM元素引用），使用 let 声明可能改变值的变量。这有助于代码的可读性和维护性，避免意外的变量重新赋值。
- 获取元素： 使用 document.getElementById() 获取HTML元素。为了避免重复获取，可以将经常使用的元素（如middleCell和input1）在脚本开始时获取并存储为常量。
- 获取输入值： inputElement.value 获取的是字符串类型。在进行数值比较前，应使用 parseFloat() 或 parseInt() 将其转换为数字。
-
DOM操作的正确姿势：
- innerHTML vs innerHtml： 这是一个常见的拼写错误。JavaScript中正确的属性名是 innerHTML（驼峰命名法，H大写）。原始问题中出现的 innerHtml 是一个典型的错别字，导致功能失效。
- 动态创建元素： 不建议将整个 <img> 标签作为字符串硬编码。更推荐的做法是使用 document.createElement('img') 创建一个 <img> 元素，然后通过设置其 src 属性来指定图片源。这种方式更安全，避免了潜在的XSS攻击，并且在处理更复杂的元素属性时也更灵活。
- 清空与追加： 在每次显示新图片之前，使用 middleCell.innerHTML = ''; 清空目标容器的现有内容。然后使用 middleCell.appendChild(img); 将新创建的图片元素添加到容器中。这确保了容器中只有一个图片，并且旧图片被正确移除。
- 用户体验： 在clearBox函数中，不仅清空了图片区域，还清空了输入框的值，并恢复了默认提示，提升了用户体验。
3. 最佳实践与注意事项
- 使用 const 和 let： 优先使用 const 声明不会重新赋值的变量，使用 let 声明可能改变值的变量。避免使用 var，因为它存在变量提升和作用域问题。
- 避免 innerHTML 拼接复杂HTML： 对于简单的文本内容，innerHTML 效率高。但当需要插入复杂结构或用户提供的内容时，应优先使用 document.createElement()、appendChild() 等方法。这不仅提高了安全性，防止XSS攻击，也使代码更易于维护。
-
事件监听： 虽然 onclick 属性在HTML中直接绑定事件简单明了，但在更复杂的应用中，推荐使用 element.addEventListener('click', function)。这允许为一个元素绑定多个事件处理器，并且将JavaScript行为与HTML结构分离，使代码更模块化。
// 示例：使用 addEventListener // document.getElementById('leftButton').addEventListener('click', fruitTest); // document.getElementById('clearButton').addEventListener('click', clearBox); - 错误处理与用户反馈： 在实际应用中，应考虑输入验证（例如，确保输入的是有效数字）、图片加载失败时的处理，以及向用户提供清晰的反馈信息。
- 可访问性： 为 <img> 标签添加 alt 属性，提供图片的文字描述，这对屏幕阅读器用户非常重要。
总结
通过本教程，我们学习了如何利用JavaScript进行基础的DOM操作，包括获取元素、处理用户输入、动态创建和插入图片元素，以及清除内容。关键点在于正确使用 innerHTML 属性（注意拼写），以及通过 document.createElement() 和 appendChild() 等方法以更健壮和安全的方式操作DOM。遵循现代JavaScript的最佳实践，如使用 const/let 和 addEventListener，将有助于编写出高质量、易于维护的代码。
立即学习“Java免费学习笔记（深入）”；
