代码及注释:
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('、') //数组的,分隔符变为、