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

在浏览器中预览 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.mfbz.cn/a/467739.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python统计分析——单样本分布形状和概率密度

参考资料&#xff1a;python统计分析【托马斯】 一、单样本分布的形状参数 在scipy.stats中&#xff0c;连续分布函数的特征是他们的位置和尺度。举两个例子&#xff1a;对于正态分布&#xff0c;&#xff08;位置/形状&#xff09;是由分布的&#xff08;均值/标准差&#xf…

计算地球圆盘负荷产生的位移

1.研究背景 计算受表面载荷影响的弹性体变形问题有着悠久的历史&#xff0c;涉及到许多著名的数学家和物理学家&#xff08;Boussinesq 1885&#xff1b;Lamb 1901&#xff1b;Love 1911&#xff0c;1929&#xff1b;Shida 1912&#xff1b;Terazawa 1916&#xff1b;Munk &…

B003-springcloud alibaba 服务治理 nacos discovery ribbon feign

目录 服务治理服务治理介绍什么是服务治理相关方案 nacos实战入门搭建nacos环境安装nacos启动nacos访问nacos 将商品微服务注册进nacos将订单微服务注册进nacos订单服务通过nacos调用商品服务 实现服务调用的负载均衡什么是负载均衡代码实现负载均衡增加一个服务提供者自定义实…

HTML5语义化元素

在HTML5之前&#xff0c;网站的分布层级有哪些呢&#xff1f; nav&#xff0c;header&#xff0c;main&#xff0c;footer 这样做有一个弊端 我们往往过多的使用div&#xff0c;通过ID或class来区分元素 对于浏览器来说这些元素不够语义化 对于我来说搜索引擎来说&#xff0c;不…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Line)

直线绘制组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Line(value?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0c;该接…

深入理解mysql 从入门到精通

1. MySQL结构 由下图可得MySQL的体系构架划分为&#xff1a;1.网络接入层 2.服务层 3.存储引擎层 4.文件系统层 1.网络接入层 提供了应用程序接入MySQL服务的接口。客户端与服务端建立连接&#xff0c;客户端发送SQL到服务端&#xff0c;Java中通过JDBC来实现连接数据库。 …

AI基础知识(3)--神经网络,支持向量机,贝叶斯分类器

1.什么是误差逆传播算法&#xff08;error BackPropagation&#xff0c;简称BP&#xff09;&#xff1f; 是一种神经网络学习算法。BP是一个迭代学习算法&#xff0c;在迭代的每一轮使用广义的感知机学习规则对参数进行更新估计。基于梯度下降&#xff08;gradient descent&am…

2025张宇考研数学基础36讲,视频百度网盘+PDF

一、张宇老师全年高数体系&#xff08;听课用书指南&#xff09; 25张宇全程&#xff1a; docs.qq.com/doc/DTmtOa0Fzc0V3WElI 复制粘贴在浏览器上打开&#xff0c;就可以看到2025张宇的全部的啦&#xff01; 一般来说我们把考研数学划分为3-4个阶段&#xff0c;分别是基础阶…

第五篇:数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第五篇&#xff1a;第五篇&#xff1a;数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南 --- 我为什么要翻译介绍美国人工智能科技公司IAB系列技术标准&#xff08;2&#xff09; ​​​​​​​翻译计划 第一篇序言第二篇简介和目录第三篇概述- IA…

新能源汽车小三电系统

小三电系统 新能源电动汽车的"小三电"系统&#xff0c;一般指车载充电机(OBC)、车载 DC/DC 变换器&#xff0c;和高压直流配电盒(PDU)。一辆纯电动汽车一般配备一台OBC 和一台车载 DC/DC 变换器。OBC将外部输入的交流电转化为直流电输出给电池&#xff0c;DC/DC衔接…

基于spring boot实现接口管理平台

数据库结构 /* Navicat MySQL Data TransferSource Server : localhost_3306 Source Server Version : 50724 Source Host : localhost:3306 Source Database : interfaceTarget Server Type : MYSQL Target Server Version : 50724 File Encoding…

C++——字符串、读写文件、结构体、枚举

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

高架学习笔记之信息系统分类概览

目录 零、前言 一、业务处理系统(TPS) 概念 功能 特点 二、管理信息系统(MIS) 概念 功能 组成 三、决策支持系统(DSS) 概念 功能 特点 组成 1. 数据仓库 2. 数据挖掘工具 3. 决策模型 4. 可视化界面 四、专家系统(ES) 概念 特点 组成 求解过程 专家系统…

【已解决】在pycharm终端无法激活conda环境,但在cmd命令行中可以

一、问题描述 在windows下winr启动cmd命令行&#xff0c;可以成功运行conda命令并且激活环境在pycharm中打开Terminal终端&#xff0c;发现无法运行conda和pip命令&#xff0c;报错环境无法激活 无法在管道中间运行文档: D:\software\Anaconda3\condabin\conda.bat。 所在位置…

docxTemplater——从word模板生成docx文件

官网文档&#xff1a;Get Started (Browser) | docxtemplater 官网在线演示&#xff1a;Demo of Docxtemplater with all modules active | docxtemplater 源码&#xff1a;https://github.com/open-xml-templating/docxtemplater 不仅可以处理word&#xff08;免费&#xf…

顶顶通呼叫中心中间件-群集配置方法讲解(mod_cti基于FreeSWITCH)

群集介绍 比较多的外呼或呼入系统&#xff0c;假如整个系统需要1万并发&#xff0c;单机最高就3000-5000并发&#xff0c;这时就需要多机群集了。顶顶通呼叫中心中间件使用redis数据库&#xff0c;多个FreeSWITHC(mod_cti)连接同一个redis就可以很容易的配置成群集系统。 想了…

mac清除dns缓存指令 mac清除缓存怎么清理

你是否曾经被要求清理dns缓存并刷新&#xff1f;清理dns缓存一般是由于修改了主机文件&#xff0c;或者想排除一些网络上的故障。在Mac上清除dns缓存需要使用命令行来实现。在本文中&#xff0c;软妹子将向大家介绍mac清除dns缓存指令&#xff0c;并展示mac清除缓存怎么清理。 …

【物联网应用】基于云计算的智能化温室种植一体化平台

目录 第一章 作品概述 1.1. 作品名称 1.2. 应用领域 1.3.主要功能 1.4.创新性说明 第二章 需求分析 2.1 现实背景 2.2 用户群体及系统功能 2.3 竞品分析 第三章 技术方案 3.1. 硬件组成与来源 3.2. 硬件设计合理性 3.3. 硬件系统设计图 3.4. 接口的通用性与可扩展性 3.5. 代码规…

【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列三:Faster R-CNN图文详解

【目标检测经典算法】R-CNN、Fast R-CNN和Faster R-CNN详解系列二&#xff1a;Fast R-CNN图文详解 概念预设 感受野 感受野(Receptive Field) 是指特征图上的某个点能看到的输入图像的区域。 神经元感受野的值越大表示其能接触到的原始图像范围就越大&#xff0c;也意味着它…

【随笔】汇编(寄存器、内存模型、常用指令、语法)

文章目录 一、简介二、寄存器三、内存模型3.1 Heap3.2 Stack 四、指令4.1 示例4.2 语法4.3常用指令 一、简介 汇编语言&#xff08;英语&#xff1a;assembly language&#xff09;是任何一种用于电子计算机、微处理器、微控制器&#xff0c;或其他可编程器件的低级语言。在不…
最新文章