JavaScript动态显示和清除用户上传图片

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript动态显示与清除用户输入图片》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

概述：基于用户输入的动态内容展示

在网页开发中，根据用户的交互动态更新页面内容是常见的需求。本教程将通过一个具体示例，演示如何根据用户在输入框中输入的值，在页面上显示不同的图片，并提供一个按钮来清除显示的内容。我们将重点关注JavaScript中正确的DOM操作方法和现代编码实践。

HTML结构基础

首先，我们需要一个基本的HTML结构，包含一个输入框、两个按钮和一个用于显示内容的段落元素。

    
    
    
    


    

        

            

                <input type="number" id="input1" placeholder="请输入数字">
                确认
            
            

                
在此显示图片
            
            

                清除
            
        
    

     

在这个HTML结构中：

• input1 是用户输入数字的文本框。
• leftButton 按钮点击后会触发 fruitTest() 函数，根据输入值显示图片。
• middleCell 是一个

  元素，用于动态显示图片。

• clearButton 按钮点击后会触发 clearBox() 函数，清除 middleCell 中的内容。

JavaScript实现：核心逻辑与最佳实践

接下来，我们将编写JavaScript代码来实现上述功能。这里我们将介绍一种更健壮、更符合现代JavaScript实践的方法。

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操作实现基于用户输入的动态内容展示。

关键学习点：

1. DOM属性大小写敏感： 务必使用正确的属性名，例如 innerHTML 而非 innerHtml。
2. 现代JavaScript语法： 优先使用 const 和 let 替代 var 来声明变量，以优化作用域管理和防止意外的变量重声明。
3. 安全的DOM操作： 推荐使用 document.createElement() 和 appendChild() 来动态创建和添加元素，这比直接操作 innerHTML 字符串更安全、更灵活，并能更好地控制DOM结构。
4. 数据类型转换： 从表单输入获取的值通常是字符串，需要根据需要使用 parseInt()、parseFloat() 或 Number() 进行类型转换。
5. 用户输入校验： 在处理用户输入时，进行必要的校验（如 isNaN）以确保程序的健壮性。
6. 清除旧内容： 在动态添加新内容前，通常需要清除目标元素中的旧内容，以避免重复或错乱。

掌握这些技术将帮助您构建更具交互性和用户友好性的网页应用。

理论要掌握，实操不能落！以上关于《JavaScript动态显示和清除用户上传图片》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！