为什么我的<a>标签没有将我带到指定的页面？

Question

我有一个包含在标签中的提交按钮，用于提交我的表单，运行 JavaScript 函数将表单保存在本地存储中并将用户带到下一页。但是，保存表单后，不会进入下一页。做什么？

这是我的 html（使用 bootstrap 样式）：

<a href="bokning_genomford.html">
  <button type="submit" class="btn btn-dark py-2 px-4" id="btn">Gå vidare</button>
</a>

这是我的 javascript 函数：

let bookings = [];
    const addBooking = (ev) => {
      ev.preventDefault();
      let booking = {
        startDate: document.getElementById("startDate").value,
        daySpan: document.getElementById("daySpan").value, 
        packageType: document.querySelector('input[name="packageType"]:checked').value,
        age: document.getElementById("age").value,
        height: document.getElementById("height").value,
        weight: document.getElementById("weight").value,
        shoeSize: document.getElementById("shoeSize").value,
        fname: document.getElementById("fname").value,
        lname: document.getElementById("lname").value,
        email: document.getElementById("email").value,
        tel: document.getElementById("tel").value,
        address: document.getElementById("address").value,
        postalCode: document.getElementById("postalCode").value,
        city: document.getElementById("city").value,
      };
      bookings.push(booking);

      localStorage.setItem('Bokningar', JSON.stringify(bookings));
    };

    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById("btn").addEventListener("click", addBooking);
    });

我希望将按钮包装在标签中以将用户发送到指定的页面，但事实并非如此。如果我使用 ctrl-click 单击 vscode 中页面的链接，它会将我带到那里，所以这不是拼写问题。我还尝试通过 action:"" 属性将 url 添加到标签，但也没有解决问题。

Answer 1

尝试删除按钮元素并保留所需的文本。 它应该看起来像这样。

<a href="bokning_genomford.html">Gå vidare</a>