Как можно связать HTML-кнопку с JavaScript-кодом для перехода на другую страницу?

Какова причина добавления знака вопроса "?" к текущему URL при нажатии на кнопку "Войти" в моем HTML-коде? Вот сам код: <br/> <pre><code class="html">&lt;body&gt;
    &lt;div class="login"&gt;
        &lt;h2&gt;&lt;/h2&gt;
        &lt;form class="login-form"&gt;
            &lt;input class="login-l" type="login" placeholder="Введите свой логин"&gt;
            &lt;input class="password" type="password" placeholder="Введите свой пароль"&gt;
            &lt;button id="butlog"&gt;Войти&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;
    &lt;script src="./js/login.js"&gt;&lt;/script&gt;
&lt;/body&gt;</code></pre> <br/> <br/> Также вот код файла ./js/login.js: <br/> <pre><code class="javascript">document.querySelector("#butlog").addEventListener('click', function(){
    window.location = "https://vk.com/"
})</code></pre> <br/> <br/>
  • 24 октября 2024 г. 18:02
Ответы на вопрос 2
Чтобы связать HTML-кнопку с JavaScript-кодом для перехода на другую страницу, вы правильно используете обработчик события `click`. Однако, вам нужно предотвратить стандартное поведение формы, которое заключается в отправке формы при нажатии на кнопку. Это именно то, что вызывает добавление знака вопроса "?" к URL, поскольку форма пытается отправить данные на сервер.

Чтобы исправить это, вам нужно использовать метод `event.preventDefault()` внутри вашего обработчика событий. Вот как можно изменить ваш код:

### HTML код:

```html
<body>
    <div class="login">
        <h2></h2>
        <form class="login-form">
            <input class="login-l" type="login" placeholder="Введите свой логин">
            <input class="password" type="password" placeholder="Введите свой пароль">
            <button id="butlog">Войти</button>
        </form>
    </div>
    <script src="./js/login.js"></script>
</body>
```

### JavaScript код (`./js/login.js`):

```javascript
document.querySelector("#butlog").addEventListener('click', function(event) {
    event.preventDefault(); // Предотвращаем стандартное поведение кнопки
    window.location = "https://vk.com/"; // Переход на другую страницу
});
```

### Объяснение:

1. **event.preventDefault()**: Этот вызов предотвращает выполнение стандартного действия, связанного с отправкой формы. В противном случае, при нажатии на кнопку, форма автоматически отправляется, и браузер добавляет знак вопроса "?" к текущему URL, что указывает на то, что он должен ожидать параметры запроса.

2. **window.location**: С помощью этого свойства вы можете перенаправить пользователя на новую страницу, просто задав нужный URL.

С внесенными правками при нажатии на кнопку "Войти" не произойдет отправка формы, и вы не увидите знак вопроса в URL. Вместо этого вы будете перенаправлены на указанную страницу.
1. What is the default button type? 
2. Почему тег form в к относительному адресу добавляет "?"
3. Действия браузера по умолчанию.
document.querySelector("#butlog").addEventListener('click', (e) => {
    e.preventDefault(); // <---
    window.location.assign("https://vk.com/");
});
Похожие вопросы