装修网站模板友情链接网站
介绍
表单提交是前端必备的技能之一，下面让我们用学过的表单知识，来完成一个健身调查的问卷。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── css
│ └── style.css
├── index.html
└── js└── index.js
其中：
index.css为样式文件。index.html为主页面。index.js需要补充的 js 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
wget https://labfile.oss.aliyuncs.com/courses/10591/03.zip&&unzip 03.zip&&rm 03.zip
在浏览器中预览 index.html 页面效果如下：
目标
完成 js/index.js 中的 formSubmit 函数，用户填写表单信息后，点击蓝色提交按钮，表单项隐藏，页面显示用户提交的表单信息（在 id 为 result 的元素显示）。信息格式如下：“身高 172cm，体重 60kg，性别男，会在健身房、公园锻炼”。 注意：检测时会模拟表单填写过程，请不要为 id 为 result 的元素赋固定值。
规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 请勿修改项目中提供的
id、class、函数名等名称，以免造成无法判题通过。
判分标准
- 本题完全实现题目目标得满分，否则得 0 分。
代码
// index.html<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><metaname="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>健身大调查</title><link rel="stylesheet" href="./css/style.css" /></head><body><!-- 表单内容部分 --><div id="quescontent"><h1 class="title">健身调查问卷</h1><form id="myForm"><div class="form-group"><h3>1.基本</h3><div class="form-item"><label for="height">身高：<inputid="height"name="height"type="text"/> cm</label></div><div class="form-item"><label for="weight">体重：<inputid="weight"name="weight"type="text"/> kg</label></div></div><div class="form-group"><h3>2.你的性别是</h3><label for=""><input type="radio" name="male" id="male" value="0" />男</label><label for=""><input type="radio" name="male" id="female" value="1" />女</label></div><div class="form-group"><h3>3.你在下面哪些地点健身锻炼</h3><div class="form-item"><input type="checkbox" name="place" id="park" value="1" />公园</div><div class="form-item"><input type="checkbox" name="place" id="gym" value="2" />健身房</div><div class="form-item"><input type="checkbox" name="place" id="outdoor" value="3" />户外</div></div></form><button class="btn" onclick="formSubmit()">提交</button></div><!-- 表单提交完成后显示的部分 --><div id="result" style="display: none">问卷提交完毕，感谢您的参与！</div><script src="./js/index.js"></script></body>
</html>
// index.jsfunction formSubmit() {// TODO：待补充代码// 1.获取表单的值// 获取身高的值 输入框let height = document.getElementById('height').value// 获取体重的值 输入框let weight = document.getElementById('weight').valueconsole.log(height,weight)// 获取性别 单选框let sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent.trim()console.log(sex);// 获取地点 多选框let place = document.querySelectorAll('[name="place"]:checked')let arr = []place.forEach(item=>{return arr.push(item.nextSibling.textContent.trim())})console.log(place,arr);const result = document.getElementById('result')result.innerHTML += `<br>身高${height}cm,体重${weight}kg,性别${sex}，会在${arr.join('、')}锻炼。`document.getElementById('quescontent').style.display = 'none'result.style.display = 'block'}
说明
-
函数定义和整体功能：
formSubmit函数的主要功能是获取表单中各个输入项的值，然后将这些值展示在页面的result区域，并隐藏原来的表单区域，显示提交完成的提示信息。 -
获取身高和体重的值：
使用document.getElementById('height')获取到id为height的输入框元素，然后通过.value属性获取该输入框中的文本内容，并将其赋值给height变量。体重的获取同理。 - 获取性别的值（单选框）：
let sex = document.querySelector('[type="radio"]:checked').nextSibling.textContent.trim()
console.log(sex);document.querySelector('[type="radio"]:checked')：这部分代码使用querySelector方法在文档中查找第一个type属性为radio且被选中（checked）的单选框元素。querySelector方法接受一个 CSS 选择器作为参数，[type="radio"]:checked就是一个 CSS 选择器，表示选中的单选框。.nextSibling：获取到选中的单选框元素后，使用nextSibling属性获取该元素的下一个兄弟节点，这里下一个兄弟节点是包含文本内容（如 "男" 或 "女"）的文本节点。.textContent：获取文本节点的文本内容。.trim()：使用trim方法去除文本内容两端的空白字符（如空格、换行符等），最终将处理后的性别文本赋值给sex变量，并打印出来。
4.获取地点的值（多选框）：
let place = document.querySelectorAll('[name="place"]:checked')
let arr = []
place.forEach(item=>{return arr.push(item.nextSibling.textContent.trim())
})
console.log(place,arr);document.querySelectorAll('[name="place"]:checked')：使用querySelectorAll方法查找所有name属性为place且被选中（checked）的多选框元素，querySelectorAll会返回一个包含所有匹配元素的NodeList对象，并赋值给place变量。- 创建一个空数组
arr用于存储选中的地点文本。 place.forEach(...)：使用forEach方法遍历place这个NodeList对象，对于每个选中的多选框元素item，执行回调函数。- 在回调函数中，
item.nextSibling.textContent.trim()的作用和获取性别时类似，先获取多选框元素的下一个兄弟节点的文本内容，然后去除两端空白字符，最后使用arr.push(...)将处理后的文本添加到arr数组中。最终打印出place（选中的多选框元素集合）和arr（包含选中地点文本的数组）。
5.展示结果并隐藏表单：
const result = document.getElementById('result')
result.innerHTML += `<br>身高${height}cm,体重${weight}kg,性别${sex}，会在${arr.join('、')}锻炼。`
document.getElementById('quescontent').style.display = 'none'
result.style.display = 'block'- 获取
id为result的元素，并将获取到的信息拼接成一个字符串，通过innerHTML属性添加到result元素中进行展示。 - 将
id为quescontent的元素（即表单所在的区域）的display样式设置为none，使其隐藏。 - 将
result元素的display样式设置为block，使其显示出来，从而展示提交完成的提示信息和用户填写的表单内容。