Исчез вывод Javascript simple innerHTML

#javascript #html

#javascript #innerhtml #вывод

Вопрос:

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

После того, как я ввожу данные в текстовое поле и сохраняю их в переменной, я распечатываю переменную в абзаце. Проблема в том, что вывод, который я распечатал, исчезает менее чем за секунду. Код кажется нормальным, что это может быть? Это выглядит как c, когда вы не ставите getch(); Заранее спасибо.

 <form>Unesite broj koji ce se ispisat kasnije.<br>
<input type="text" id="userInput">
<input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()"><br><br>

</form> 
    <br><br>
<p>Unjeli ste <b id="ispis"></b></p>
<script>
function unesi(){
var userInput = document.getElementById('userInput').value;
document.getElementById('ispis').innerHTML = userInput;
}   

</script>

Ответ №1:

<form> Тег не указывает action атрибут, поэтому, когда вы нажимаете кнопку отправки, браузер отправляет форму по текущему URL-адресу, который будет выглядеть так, как будто страница обновляется.

Если вы хотите запустить unesi функцию, когда пользователь нажимает «Отправить», и запретить отправку HTML-формы, вам нужно немного изменить ее:

 <input type="submit" name="unos" value="Unesi i ispisi"
      onclick="unesi(); return false;">

return false Предотвращает отправку формы самой по себе.

1. Спасибо за ваш ответ, теперь я понимаю, и я бы не стал без вашего объяснения. Но ваш код не приносит никакой пользы, он все еще обновляется. Единственная рабочая вещь — это удаление <form> из кода.

Ответ №2:

Потому что форма отправляет и обновляет страницу. Отмените запрос формы.

 <input type="submit" name="unos" value="Unesi i ispisi" onclick="return unesi()">

и функция

 function unesi(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('ispis').innerHTML = userInput;
    return false;
}

лучший вариант — сделать это на уровне формы

 <form action="#" method="get" onsubmit="return unesi()">

1. Я выполнил ваш первый вариант, и он все еще обновляется, а также второй … единственное, что сработало, это удаление <form> из кода. большое спасибо, я бы не понял этого без вашей помощи.

Ответ №3:

Вместо отмены отправки формы, другим вариантом является изменение

 <input type="submit" name="unos" value="Unesi i ispisi" onclick="unesi()">

Для

 <input type="button" name="unos" value="Unesi i ispisi" onclick="unesi()">

Это сделает так, что форма вообще не будет пытаться отправить при нажатии кнопки.