ESP32-Web-Server编程- JS 基础 3

物联网老王

已于 2023-11-27 21:47:33 修改

阅读量1k

点赞数 9

分类专栏： ESP-Web开发 ESP 文章标签：前端 javascript 物联网 iot web

于 2023-11-27 10:41:30 首次发布

本文链接：https://blog.youkuaiyun.com/wangyx1234/article/details/134639849

版权

ESP-Web开发同时被 2 个专栏收录

29 篇文章 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

ESP

57 篇文章

订阅专栏

本博客介绍了如何在ESP32-Web-Server中使用JavaScript实现按钮控件，通过onclick事件切换LED灯图标。前端创建了id为“imageLamp”的图片和两个按钮，每个按钮的onclick事件指向不同的图片资源。后端增加了处理图片请求的handler。点击按钮可以改变网页显示，展示JavaScript控制网页行为的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ESP32-Web-Server编程- JS 基础 3

概述

本示例演示通过 button 控件的 onclick 内联属性，实现在网页上点击按钮，切换 LED 灯图标的转变。

示例解析

前端设计

前端代码建立了一个 id 为 “imageLamp” 的图片对象。并建立两个按钮，设计两个按钮的 onclick 事件为引用不同的图片。

<p>
  <img id="imageLamp" src="light_on.png">
</p>
<p>
  <button onclick="document.getElementById('imageLamp').src='light_on.png'">Turn on the light</button>
</p>
<p>
  <button onclick="document.getElementById('imageLamp').src='light_off.png'">Turn off the light</button>
</p>