JS渲染锻炼输入表单

前言

上篇文章为大家展现了好看的信息窗口，接下来我们跟着流程图看下一步
在这里插入图片描述

之前我们的带点击事件已经添加完毕，下一步就是当用户点击的时候，渲染锻炼形式，当然这是一个标签，可以提供给用户输入锻炼形式

实例

● 我们的表单在HTML中已经写好了，其实这个表单有一个隐藏类
在这里插入图片描述

● 当我们去除这个隐藏类的时候，我们就可以让表单展现出来，当然这个表单的类名已经在js存储到变量中，我们可以直接去使用

javascript">map.on('click', function (mapEvent) {form.classList.remove('hidden');map.on('click', function (mapEvent) {form.classList.remove('hidden');// const { lat, lng } = mapEvent.latlng;// L.marker([lat, lng])//   .addTo(map)//   .bindPopup(//     L.popup({//       maxWidth: 250,//       minWidth: 100,//       autoClose: false,//       closeOnClick: false,//       className: 'running-popup',//     })//   )//   .setPopupContent('跑步')//   .openPopup();});},});},

在这里插入图片描述

● 让我们刚开始点击的时候，光标就锁定在锻炼距离上，这样会提升用户体验

javascript">inputDistance.focus();

在这里插入图片描述

● 当表单生成并且填写完毕后，我们回车就会将标记渲染到地图上，很明显，这就要使用监听事件了

javascript">form.addEventListener('submit', function () {//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

但是，我们发现这里的map，和mapEvent好像无法访问到，因为这个是在另一个函数内部的，所以我们需要在全局上进行宣告；宣告完成后，不要忘记修改函数中的变量声明；

javascript">let map, mapEvent;
if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;const coords = [latitude, longitude];map = L.map('map').setView(coords, 13); //去除const声明L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(map);map.on('click', function (mapE) {  //这个的Event需要修改mapEvent = mapE; //将这里的变量赋予到全局去form.classList.remove('hidden');inputDistance.focus();});},function () {alert('无法获取你的位置！');});

● 但是这样并不会生效哦，不要忘记，表单的默认行为提交后会刷新网页；所以我们要阻止表单的默认行为；

javascript">form.addEventListener('submit', function (e) {e.preventDefault(); //组织表单默认行为//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

在这里插入图片描述

● 这个标签在输入提交之后并不会清楚里面的内容，所以我们使用我们之前经常使用方式，当表格提交后，清理输入选项；

javascript">form.addEventListener('submit', function (e) {e.preventDefault(); //组织表单默认行为//将表格输入内容置空inputDistance.value =inputDuration.value =inputCadence.value =inputElevation.value ='';//展现标记const { lat, lng } = mapEvent.latlng;L.marker([lat, lng]).addTo(map).bindPopup(L.popup({maxWidth: 250,minWidth: 100,autoClose: false,closeOnClick: false,className: 'running-popup',})).setPopupContent('跑步').openPopup();
});

● 下面，当表单输入为骑行的时候将锻炼配置改变为骑行海拔。
● 这样在HTML里面也写好了，同样，这个也是隐藏类
在这里插入图片描述

● 其实这个实现非常的简单，我们只需要在监听事件监听到选择改变的时候，改变一下隐藏类就行了，实际我们只需要确保这两个必须保持有一个有隐藏类

javascript">inputType.addEventListener('change', function () {//改变的时候判断是否存在隐藏类，有就去除，没有就添加inputElevation.closest('.form__row').classList.toggle('form__row--hidden'); inputCadence.closest('.form__row').classList.toggle('form__row--hidden');
});