Блог

Главная - Вопросы по программированию - Использование ввода и кнопки в HTML

Использование ввода и кнопки в HTML

#html #button #input

#HTML #кнопка #ввод

Вопрос:

Я создаю веб-страницу, которая перенаправляет пользователей на определенную веб-страницу.

Некоторая часть URL конкретной веб-страницы является постоянной, а остальная часть является переменной.

Если веб www.gotop.com/page1 -страница. www.gotop.com/ является постоянным каждый раз, но page1 часть меняется. И я хочу использовать page1 часть в качестве входных данных на моей веб-странице, а затем кнопку для перехода www.gotop.com/page1

Я много пробовал, но потерпел неудачу. Мой окончательный код

 <!DOCTYPE html>
<html>

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

   <body>
      <h1>The button Element</h1>

      <button type="button" onclick="window.location.href='http://152.158.53.1:2222/q/"name"/';">Click Me!</button>

      <p>PLEASE WAIT...Redirecting to REALME 1 URL</p>
   </body>
</html>

Но это не работает.

Ответ №1:

Здесь я взял значение variable части URL из входных данных и объединил его в конце constant части URL.

window.location.href перенаправляет вас на нужный URL.

Это должно помочь,

   document.getElementById('button').addEventListener('click', function(e) {
    const page = document.getElementById('val').value
    window.location.href = `/constant/url/${page}`
  }) 
 <html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <input type="text" id="val">

  <button id="button">Click me!</button>

</body>
</html>

Комментарии:

1. Дайте мне знать, если вам нужна какая-либо другая помощь!

Ответ №2:

Я думаю, что это было бы лучшим решением

 function loadPage(){
     location.href = document.querySelector("#page_name").value;
} 
 <input type="text" id="page_name"/>
<button onclick="loadPage()">Go</button>

При нажатии на кнопку будет вызвана функция loadPage. Там получается значение ввода, и страница перенаправляется на этот URL.

Метки: