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

代码及注释:

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('、')       //数组的,分隔符变为、

相关推荐

  1. web健身调查

    2024-04-03 19:26:02       35 阅读
  2. Web大学组)2022省赛:冬奥抽奖

    2024-04-03 19:26:02       51 阅读
  3. web2022省赛:冬奥抽奖

    2024-04-03 19:26:02       46 阅读
  4. web:展开你的扇子

    2024-04-03 19:26:02       47 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-03 19:26:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-03 19:26:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-03 19:26:02       87 阅读
  4. Python语言-面向对象

    2024-04-03 19:26:02       96 阅读

热门阅读

  1. leetcode - 1248. Count Number of Nice Subarrays

    2024-04-03 19:26:02       36 阅读
  2. watch于watcheffect的区别

    2024-04-03 19:26:02       41 阅读
  3. STM32 GPIO输入检测——按键

    2024-04-03 19:26:02       46 阅读
  4. arm架构离线部署docker

    2024-04-03 19:26:02       36 阅读
  5. 短视频中可能触发降权的行为有哪些?

    2024-04-03 19:26:02       40 阅读
  6. Linux文件系统深入解析

    2024-04-03 19:26:02       38 阅读
  7. x264 arm64汇编分析 quant8x8_neon分析

    2024-04-03 19:26:02       36 阅读
  8. [Python学习篇] Python格式化输出

    2024-04-03 19:26:02       42 阅读
  9. 亚远景科技-浅谈ASPICE标准和ASPICE认证/评估

    2024-04-03 19:26:02       36 阅读
  10. 容器网络测试关键问题

    2024-04-03 19:26:02       36 阅读