JS渲染锻炼输入表单

news2025/11/1 3:04:42

前言

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

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

实例

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

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

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();
      });
    },
      });
    },

在这里插入图片描述

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

inputDistance.focus();

在这里插入图片描述

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

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好像无法访问到，因为这个是在另一个函数内部的，所以我们需要在全局上进行宣告；宣告完成后，不要忘记修改函数中的变量声明；

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('无法获取你的位置！');
    }
  );

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

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();
});

在这里插入图片描述

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

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里面也写好了，同样，这个也是隐藏类
在这里插入图片描述

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

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