Использование getElementById для изменения содержимого HTML - PullRequest
Новая
       2

Использование getElementById для изменения содержимого HTML

0 голосов
/ 10 июня 2018

Хорошо, поэтому я недавно начал изучать html / css и js.В нескольких уроках я не могу понять, как правильно использовать функцию getElementById. 

<!DOCTYPE html>
<html>
<head>
    <title>Practice</title>
    <link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <h1 id="first">My Practice Page!</h1>

    <form name="myForm" onsubmit="return validateForm()"
    <label>Name:</label><br />
    <input type="text" name="fname" />
    <input type="submit" value="Submit" />
    </form>

    <script>
        var nm = document.forms["myForm"]["fname"].value;
        if (nm == "Don") {
            document.write("Hi, Don");
            return true;
        }
        else {
            document.write("Hi, stranger.");
            return false;
        }
    </script>
</body>
</html>

Кнопка отправки работает и регистрирует, что fname равно входному тексту, но она либо не присваивает это значение nm или I 'я не правильно использую document.write.

У кого-нибудь есть идеи?Кажется, это будет глупой мелочью.

Ответы [ 3 ]

0 голосов
/ 10 июня 2018

Это потому, что JS волшебным образом не выполняет логику: вам нужно вместо этого прослушать событие отправки формы (избегайте использования встроенного связывания JS): 

document.forms["myForm"].addEventListener('submit', function(e) {
    // Prevents default form submission
    e.preventDefault();

    // Your logic here
});


document.forms["myForm"].addEventListener('submit', function(e) {
  e.preventDefault();
  
  var nm = document.forms["myForm"]["fname"].value;
  if (nm.value === "Don") {
    output.textContent = "Hi, Don";
  } else {
    output.textContent = "Hi, stranger.";
  }
});
<form name="myForm">
  <label>Name:</label><br />
  <input type="text" name="fname" />
  <input type="submit" value="Submit" />
</form>
<p id="output"></p>

Если вы затем решите отправить форму программно в блоке if / else, вы можете просто вызвать document.forms["myForm"].submit() напрямую.

0 голосов
/ 10 июня 2018

Во-первых, ваш элемент <form> не имеет символа > в конце открывающего тега.

Затем ваш скрипт запускается сразу после загрузки страницы, и в это времяпользователь не имел возможности что-либо ввести в поле.

Далее, document.write не следует использовать в этой ситуации, поскольку он перезапишет существующий документ.Вместо этого установите пустой элемент, в который вы будете записывать свои выходные данные.

Кроме того, поскольку вы фактически нигде не отправляете данные формы, не используйте кнопку отправки и событие submit.Просто используйте обычную кнопку и ее событие click.

И не используйте встроенные атрибуты события HTML (onsubmit).Вместо этого настройте свои обработчики событий в JavaScript.

Наконец, вы не дали ни одному элементу id, поэтому вы не можете использовать .getElementById() для поиска любого. 

<!DOCTYPE html>
<html>
<head>
    <title>Practice</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1 id="first">My Practice Page!</h1>

    <form name="myForm">
      <label>Name:</label><br>
      <input type="text" name="fname" id="fname">
      <!-- Use a regular button since you aren't submitting form data anywhere -->
      <input type="button" value="Submit">
    </form>
    
    <div id="output"></div>
    <script>
      // Set up a click event handler for the button
      document.querySelector("[type='button']").addEventListener("click", validateForm);
      
      // Get the reference to your text field. You can't get it by its id unless you've
      // given it an id. name is not the same thing as id.
      var fName = document.getElementById("fname");
      
      // You didn't have your code inside of the callback function
      function validateForm(){

        if (fName.value == "Don") {
            // Just populate a pre-existing element with the correct data.
            output.textContent = "Hi, Don";
        }
        else {
            output.textContent = "Hi, stranger.";
        }
      }
    </script>
</body>
</html>
0 голосов
/ 10 июня 2018

вы забыли объявить функцию validateform 

<!DOCTYPE html>
<html>
<head>
    <title>Practice</title>
    <link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <h1 id="first">My Practice Page!</h1>

    <form name="myForm" onsubmit="return validateForm()">
    <label>Name:</label><br />
    <input type="text" name="fname" />
    <input type="submit" value="Submit" />
    </form>

    <script>
    function validateForm(){
        var nm = document.forms["myForm"]["fname"].value;
        if (nm == "Don") {
            document.write("Hi, Don");
            return true;
        }
        else {
            document.write("Hi, stranger.");
            return false;
        }
      }
    </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...