web蓝桥杯真题:健身大调查

代码及注释:

javascript 复制代码
function formSubmit() {
  // TODO:待补充代码
  const quescontent = document.querySelector('#quescontent')
  const height = document.querySelector('#height')
  const weight = document.querySelector('#weight')
  const male = document.querySelector('[name="male"]:checked')    //属性选择器
  const place = document.querySelectorAll('[name="place"]:checked')
  const result = document.querySelector('#result')
  let placeArr = []
  place.forEach(item => {        //处理赋值
    if(item.value == 1) {
      placeArr.push('公园')
    } else if(item.value == 2) {
      placeArr.push('健身房')
    } else {
      placeArr.push('户外')
    }
  })
  result.style.display = 'block'
  quescontent.style.display = 'none'
  let html = `<div>问卷提交完毕,感谢您的参与!</div>
  <div>身高${height.value}cm,体重${weight.value}kg,性别${male.value == 0 ? '男' : '女'},会在${placeArr.join('、')}锻炼。</div>`        //array.join() 用指定分隔符分割
  result.innerHTML = html
}

知识点:

1.属性选择器

let div = document.querySeletor('name="male":checked')

2.分割字符串

array.join('') //数组变为字符串

array.join('、') //数组的,分隔符变为、

相关推荐
海鸥两三几秒前
基于 Vue 3 + 高德地图的网格规划系统实战(有源码)
前端·javascript·vue.js
逸A5 分钟前
某里v2反混淆 codec 化路上踩到的两个隐蔽坑:被清零的 salt 与 opaque loop bound
javascript·人工智能·目标跟踪
丷丩9 分钟前
MapLibre GL JS第11课:获取鼠标指针坐标
前端·javascript·gis·地图·mapbox·maplibre gl js
代码AI弗森17 分钟前
前端周刊第 467 期[特殊字符] 本期精选目录
前端
随便的名字18 分钟前
前端路由的底层逻辑:URL 中 # 和 ? 的区别与关系详解
前端
kongba00719 分钟前
ttyd Web终端安装指南(OpenCloudOS 9)
linux·前端
zhoumeina9920 分钟前
前端串行合成流程 + 每张图上传接口
前端·状态模式
风骏时光牛马21 分钟前
Swift 基于MVVM架构实现完整列表数据展示与交互功能实战案例
前端
就叫_这个吧30 分钟前
JavaScript基础数据类型、运算符、数组、函数的定义及DOM方式应用
开发语言·前端·javascript
作业逆流成河37 分钟前
别再一次性重构枚举了:如何把一个真实后台项目的状态字典,渐进式迁移到enum-plus?
前端·javascript·开源