Как заставить html запускать функцию javascript, когда пользователь нажимает кнопку? - PullRequest
0 голосов
/ 02 февраля 2019

У меня есть веб-форма, где пользователи вводят имя человека и затем нажимают кнопку, чтобы открыть страницу об этом человеке.Например, они набирают Player One, и он запускает функцию, которая открывает файл C: \ PlayerOne.

Я пытался использовать тег <button> и добавить элемент onclick для запуска функции, но я также не смог диагностировать проблему там.Материал прослушивателя событий, с которым я не слишком знаком, но я видел его [здесь] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button), поэтому я решил попробовать его таким образом.

<form>
  <fieldset>
    <legend>Enter player name: </legend>
    First name:<br>
    <input type="text" name="firstname"><br>
    Last name:<br>
    <input type="text" name="lastname"><br><br>
    <input type="button" value="Submit">
  </fieldset>

  <script>
    const input = document.querySelector('button');
    input.addEventListener('click', UseData);
    function UseData()
        {
        var Fname=document.GetElementById('firstname');
        var Lname=document.GetElementById('lastname');
        window.location = "C:\" + Fname + Lname;
        }
  </script>
</form>  

Я хочу пользователячтобы иметь возможность набирать имя и открывать соответствующий файл, как описано выше. Однако кнопка на этом этапе просто ничего не делает. У меня есть тестовый файл для ссылки, который я набираю имя в поляхформы.

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Вот пример подобного кода, в котором я задействую кнопку, вызывающую функцию

Кнопка:

 <button onclick="theFunction()">sampletext</button>

Сценарий:

    var x = document.getElementById("sampleElement");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

В моемНапример, кнопка используется, чтобы показать / скрыть div.При нажатии на мою кнопку запускается функция, которая изменяет видимость div.

0 голосов
/ 02 февраля 2019

Это потому, что в вашей форме нет тегов button.Вместо этого используйте селектор атрибута так:

const input = document.querySelector('input[type="button"]');
...