当前位置: 首页 > news >正文

蓝桥杯练习题——健身大调查

在浏览器中预览 index.html 页面效果如下:

初始效果

目标

完成 js/index.js 中的 formSubmit 函数,用户填写表单信息后,点击蓝色提交按钮,表单项隐藏,页面显示用户提交的表单信息(在 id 为 result 的元素显示)。信息格式如下:“身高 172cm,体重 60kg,性别男,会在健身房、公园锻炼”。 注意:检测时会模拟表单填写过程,请不要为 id 为 result 的元素赋固定值。

完成效果

题解

function formSubmit() {// TODO:待补充代码let height=document.querySelector("#height").value;let weight=document.querySelector("#weight").value; let sex=document.querySelector('input[name="male"]:checked').value;let place=document.querySelectorAll('input[name="place"]:checked');let quescontent=document.querySelector("#quescontent")let result=document.querySelector("#result")quescontent.style.display='none'result.style.display='block'if(sex==1){sex="女";}else sex='男';let newPlace=[]for(let i=0;i<place.length;i++){console.log(place[i]);newPlace.push(place[i].nextSibling.textContent.trim())}result.innerHTML=`问卷提交完毕,感谢您的参与!<br>身高${height}cm,体重${weight}kg,性别 ${sex},会在${newPlace.join(',')}健身锻炼。`
}

newPlace.push(place[i].nextSibling.textContent.trim()):将 place 数组中每个元素的下一个同胞节点的文本内容(去除首尾空白)添加到 newPlace 数组中

http://www.lryc.cn/news/323916.html

相关文章:

  • React——组件通讯
  • php闭包应用
  • 基于python+vue的OA公文发文管理系统flask-django-php-nodejs
  • 脉冲变压器电感的工艺结构原理及选型参数总结
  • java中Arrays介绍及常用方法
  • CTF题型 Http请求走私总结Burp靶场例题
  • Nginx 的安装、启动和关闭
  • python 操作excel(openpyxl.load_workbook)、excel操作封装
  • MySQL系统参数配置实战:生产环境优化
  • 判断列表中每一个元素的个数
  • 目标检测——PP-YOLOE算法解读
  • 每日一题 --- 螺旋矩阵 II[力扣][Go]
  • C语言自定义类型结构体
  • 【SpringBoot框架篇】37.使用gRPC实现远程服务调用
  • 投资的三个匹配
  • [Netty实践] 请求响应同步实现
  • Java进阶—哈希冲突的解决
  • css的border详解
  • 如何保障消息一定能发送到RabbitMQ?
  • 【web前端】CSS语法
  • JS+CSS3点击粒子烟花动画js特效
  • docker镜像复制与常见命令
  • 如何在linux环境上部署单机ES(以8.12.2版本为例)
  • 如何利用人工智能技术实现企业营销效率提升10倍(下)
  • 【PHP + 代码审计】数组函数
  • Keepalive与idle监测及性能优化
  • DS-红黑树(RBTree)
  • ubuntu 如何使用阿里云盘
  • sqlite3 交叉编译
  • 【AI生成文章】flutter ChangeNotifierProvider 实用场景举例