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

在浏览器中预览 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.mzph.cn/news/755659.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis高性能IO模型剖析

Redis的高性能IO模型主要归功于其内部精心设计的机制&#xff0c;包括单线程模型、IO多路复用技术、高效的数据结构以及内存操作等。下面我们将逐一剖析这些关键因素。 首先&#xff0c;Redis采用单线程模型来处理网络IO和键值对读写操作。这种设计避免了多线程间的竞争和同步…

OxyPlot 导出图片

在 OxyPlot 官方文档 https://oxyplot.readthedocs.io/en/latest/export/index.html 中查看 这里用到的是导出到 PNG 文件的方法&#xff0c;不过用的 NuGet 包最新版&#xff08;2.1.0&#xff09;中&#xff0c;PngExporter 中并没有 Background 属性&#xff1a; 所以如果图…

【C语言】C语言内存函数

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《C语言》 &#x1f389;道阻且长&#xff0c;行则将至 前言 这篇博客是关于C语言内存函数(memcpy,memmove,memset,memcmp)的使用以及部分的模拟实现 memcpy,memmove,memset,memc…

一文搞懂“ReentrantReadWriteLock——读写锁”

文章目录 初识读写锁ReentrantReadWriteLock类结构注意事项 ReentrantReadWriteLock源码分析读写状态的设计HoldCounter 计数器读锁的获取读锁的释放写锁的获取写锁的释放 锁降级 初识读写锁 Java中的锁——ReentrantLock和synchronized都是排它锁&#xff0c;意味着这些锁在同…

Python高级语法

Python高级语 1 列表推导式1.1 什么是列表推导式1.2 列表推导式的使用 2 字典推导式2.1 什么是字典推导式2.2 字典推导式的使用 3 元组推导式4 集合推导式5 三元表达式5.1 什么是三元表达式5.2 三元表达式的使用 1 列表推导式 1.1 什么是列表推导式 列表推导式的英文&#xf…

docker安装配置dnsmasq

docker下载安装 参考&#xff1a;docker安装、卸载、配置、镜像 如果是低版本的额ubuntu&#xff0c;比如ubuntu16.04.7 LTS&#xff0c;为了加快下载速度&#xff0c;参考&#xff1a;Ubuntu16.04LTS安装Docker。 docker安装dnsmasq 下载dnsmasq镜像 首先镜像我们可以选择…

代码随想录 动态规划-完全背包问题

52. 携带研究材料 时间限制&#xff1a;1.000S 空间限制&#xff1a;128MB 题目描述 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验…

Could not locate zlibwapi.dll. Please make sure it is in your library path!

背景 运行PaddleOCR时&#xff0c;用的CUDA11.6配的是cuDNN8.4。但是运行后却报错如下。 解决手段 去网上找到这两个文件&#xff0c;现在英伟达好像不能下载了&#xff0c;但是可以去网盘下载。然后把dll文件放入CUDA11.6文件下的bin目录&#xff0c;而lib文件放入CUDA11.6文…

5.1.4.2、【AI技术新纪元:Spring AI解码】Llama2 Chat

Llama2 Chat Meta 的 Llama 2 Chat 是 Llama 2 系列大型语言模型的一部分。它在基于对话的应用程序中表现出色,参数规模范围从 70 亿到 700 亿不等。利用公共数据集和超过 100 万次人类注释,Llama Chat 提供了上下文感知的对话。 通过从公共数据源获取的 2 万亿标记进行训练…

基于 RisingWave 和 Kafka 构建实时网络安全解决方案

实时威胁检测可实时监控和分析数据&#xff0c;并及时对潜在的安全威胁作出识别和响应。与依赖定期扫描或回顾性分析的安全措施不同&#xff0c;实时威胁检测系统可提供即时警报&#xff0c;并启动自动响应来降低风险&#xff0c;而不会出现高延迟。 实时威胁检测有许多不同的…

英特尔生态的深度学习科研环境配置-A770为例

之前发过在Intel A770 GPU安装oneAPI的教程&#xff0c;但那个方法是用于WSL上。总所周知&#xff0c;在WSL使用显卡会有性能损失的。而当初买这台机器的时候我不在场&#xff0c;所以我这几天刚好有空把机器给重装成Ubuntu了。本篇不限于安装oneAPI&#xff0c;因为在英特尔的…

【01】htmlcssgit网络基础知识

一、html&css 防脱发神器 一图胜千言 使用border-box控制尺寸更加直观,因此,很多网站都会加入下面的代码 * {margin: 0;padding: 0;box-sizing: border-box; }颜色的 alpha 通道 颜色的 alpha 通道标识了色彩的透明度,它是一个 0~1 之间的取值,0 标识完全透明,1…

探索什么便签软件好用,可以和手机同步的便签软件

在信息技术日新月异的今天&#xff0c;各类数字工具已经成为我们生活与工作的重要助手。便签软件作为一种简单却高效的辅助工具&#xff0c;悄然改变着人们的记录习惯与时间管理方式。而在诸多便签软件中&#xff0c;能够实现手机与电脑同步功能的产品尤显其独特的价值。那么&a…

数据结构 之 哈希表习题 力扣oj(附加思路版)

哈希表用法 哈希表&#xff1a;键 值对 键&#xff1a;可以看成数组下标&#xff0c;但是哈希表中的建可以是任意类型的&#xff0c;建不能重复,可以不是连续的 值&#xff1a;可以看成数组中的元素&#xff0c;值可以重复&#xff0c;也可以是任意类型的数据 #include<iost…

R语言程序设计(零基础速通R语言语法和常见函数的使用)

目录 1.Rstudio中的一些快捷键 2.R对象的属性 3.R语言中常用的运算符​编辑 4.R的数据结构 向量 如何建立向量&#xff1f; 如何从向量里面提取元素&#xff1f; 矩阵 如何建立矩阵&#xff1f; 如何从矩阵里面提取元素&#xff1f; 数据框 如何建立数据框&#xf…

python-pandas基础学习

可参考&#xff1a; pandas&#xff1a;http://pandas.pydata.org/docs/user_guide/10min.html 一、基础知识 DataFrame 方法&#xff0c;可以将一组数据&#xff08;ndarray、series, map, list, dict 等类型&#xff09;转化为表格型数据 import pandas as pd data {name: …

前端三件套 | 综合练习:模拟抽奖活动,实现一个简单的随机抽取并显示三名获胜者

随机运行结果如下&#xff1a; 参考代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…

鸿蒙-自定义组件-语法

目录 语法组成 在学习自定义组件前&#xff0c;先看一下ArkTS的组成 装饰器 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。如上述示例中Entry、Component和State都是装饰器 Entry 表示该自定义组件为入口组件 Component 表示自定义组件 State 表示组…

python基础——字符串的常见操作方法【下标索引,index,count,len,replace,split,strip】

&#x1f4dd;前言&#xff1a; 字符串是一种有序的&#xff0c;允许重复字符串存在的&#xff0c;不可修改的序列 这篇文章主要总结一下python中有关字符串的部分相关知识&#xff0c;以及字符串的常见操作方法&#xff1a; 1&#xff0c;和其他序列极其类似的操作方法 2&…

2024/03/18(网络编程·day4)

一、思维导图 二、广播 广播发送端 #include<myhead.h> int main(int argc, const char *argv[]) {//1、创建套接字int sfd socket(AF_INET,SOCK_DGRAM,0);if(sfd -1){perror("socket error");return -1;}//2、设置允许广播int broadcast 1;if(setsockopt…