使用 JavaScript 切换图片和按钮文本-html教程-PHP中文网

使用 JavaScript 切换图片和按钮文本

碧海醫心

发布： 2025-10-14 11:35:12

原创

933人浏览过

使用 javascript 切换图片和按钮文本

本文档旨在指导开发者如何使用 JavaScript 实现点击按钮切换图片，并同步更新按钮上的文本。通过一个简单的 HTML 页面和 JavaScript 代码示例，详细讲解了如何获取元素、添加事件监听器，以及如何根据按钮的当前状态来修改图片源和按钮文本。帮助开发者理解 JavaScript 中条件判断和 DOM 操作的实际应用。

实现图片切换和按钮文本更新

本教程将演示如何使用 JavaScript 实现一个简单的功能：点击按钮，切换页面上的图片，并且按钮上的文字也会随之改变。例如，点击“Frown”按钮，图片会变成皱眉的表情，同时按钮文字变为“Smile”。再次点击，则恢复到微笑的表情，按钮文字也变回“Frown”。

HTML 结构

首先，我们需要一个包含图片和按钮的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
<title>图片切换</title>
</head>
<body>
    <img id="myImage" src="smile.png" alt="Smile">
    <input type="button" id="btn" value="Frown">
</body>
</html>

登录后复制

这段 HTML 代码定义了一个 img 元素和一个 input 按钮。img 元素的 id 为 myImage，初始图片是 smile.png。input 按钮的 id 为 btn，初始值为 Frown。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码

接下来，我们使用 JavaScript 来实现图片切换和按钮文本更新的逻辑：

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

<script>
    const pic = document.getElementById('myImage');
    const btn = document.getElementById('btn');

    btn.addEventListener("click", () => {
        if (btn.value === "Frown") {
            pic.src = "frown.png";
            btn.value = "Smile";
        } else {
            pic.src = "smile.png";
            btn.value = "Frown";
        }
    });
</script>

登录后复制

这段 JavaScript 代码做了以下几件事：

获取元素: 使用 document.getElementById 获取 img 元素和 input 按钮。
添加事件监听器: 为按钮添加一个点击事件监听器，当按钮被点击时，执行相应的函数。
条件判断: 在事件处理函数中，使用 if 语句判断按钮的当前值。如果按钮的值是 "Frown"，则将图片源切换为 frown.png，并将按钮的值更新为 "Smile"。否则，将图片源切换回 smile.png，并将按钮的值更新为 "Frown"。

注意：

在 if 条件判断中，要使用 === 或 == 进行比较，而不是赋值运算符 =。 = 是赋值操作，会改变变量的值，而 === 和 == 用于比较两个值是否相等。 === 是严格相等运算符，它会比较值和类型是否都相等，而 == 是相等运算符，它会在比较之前进行类型转换。
确保 smile.png 和 frown.png 这两个图片文件存在，并且路径正确。

完整代码示例

将 HTML 结构和 JavaScript 代码结合起来，得到完整的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>图片切换</title>
</head>
<body>
    <img id="myImage" src="smile.png" alt="Smile">
    <input type="button" id="btn" value="Frown">

    <script>
        const pic = document.getElementById('myImage');
        const btn = document.getElementById('btn');

        btn.addEventListener("click", () => {
            if (btn.value === "Frown") {
                pic.src = "frown.png";
                btn.value = "Smile";
            } else {
                pic.src = "smile.png";
                btn.value = "Frown";
            }
        });
    </script>
</body>
</html>

登录后复制

总结

通过本教程，你学习了如何使用 JavaScript 实现点击按钮切换图片，并同步更新按钮上的文本。这涉及到 HTML 元素的获取、事件监听器的添加以及条件判断的应用。掌握这些基本技能，可以为构建更复杂和交互性更强的 Web 应用程序打下坚实的基础。在实际开发中，可以根据具体需求，对图片和按钮的样式进行自定义，以达到更好的用户体验。

以上就是使用 JavaScript 切换图片和按钮文本的详细内容，更多请关注php中文网其它相关文章！