How to load different html pages with JavaScript, triggered by the user, clicking on a button?

Question

I know it's probably simple to handle, but seems that not for silly boy like me.

Here is the deal:

I am trying to load 3 different html pages, depending on 3 different buttons for a user to select.

It only displays button selected but when I try to click book button I see error 405.

Thanks in advance to everyone guiding me through what am I doing wrong =)

 let bookBtns = document.getElementsByClassName("btn"); let bookNow = document.getElementById("book-btn-widget"); let bicycleBtn = document.getElementById("bicycle"); let carBtn = document.getElementById("car"); let vanBtn = document.getElementById("van"); // Transport selection buttons trakcer for (var i = 0; i < bookBtns.length; i++) { bookBtns[i].addEventListener("click", function() { var current = document.getElementsByClassName("icon-active"); if (current.length > 0) { current[0].className = current[0].className.replace(" icon-active", ""); } this.className += " icon-active"; }); } bookNow.click = function() { if (carBtn.classList.contains("icon-active")) { location.href = "file:///Users/apple/Desktop/AnyRuns%20Project/car-quote.html"; } else if (vanBtn.classList.contains("icon-active")) { location.href = "./van-quote.html"; } else { location.href = "./bicycle-quote.html"; } };

 .transport-buttons { display: flex; flex-direction: row; }.bicycle-icon, .car-icon, .van-icon { border-radius: 25px; cursor: pointer; padding: 8px; width: 110px; border: 2px solid #13985C; transition-duration: 1s; margin-left: 10px; }.icon-active { border-radius: 25px; padding: 8px; background-color: #13985C; color: #fff; border: 2px solid #13985C; }.fa-biking, .fa-car, .fa-truck { font-size: 15px; }.book-button { background-color: #13985C; border: none; outline: none; padding: 9px 23px; border-radius: 12px; color: #fff; cursor: pointer; outline: none; }

 <div class="transport-required-section"> <h4 class="delivery-headings">Transport required</h4> <div class="transport-buttons"> <div class="bicycle-icon btn icon-active"><i class="fas fa-biking" id="bicycle"></i> Bicycle</div> <div class="car-icon btn" id="car"><i class="fas fa-car"></i> Car</div> <div class="van-icon btn" id="van"><i class="fas fa-truck"></i> Van</div> </div> </div> <div class="vl"></div> <div class="booking-section"> <button id="book-btn-widget" class="book-button" onclick="location.href = 'bicycle-quote.html';">Book Now</button> </div>

Answer 1

I've used this code to go to a page within 3 seconds. Maybe you could alter it with the onclick function so that when you press on the button, you'll immediately go to the page you want to go to. (Setting the setTimeout at 1 ms (EG) or completely removing it.

  <script>
             setTimeout(function(){
                window.location.href = 'https://kapsalonyazanonline.nl/';
             }, 3000);
          </script>