2015-12-08 3 views
0

Я попытался скрыть div после отправки формы, но безуспешно. Итак, я хочу знать поток создания div при использовании внешнего js-файла. Рассмотрим этот код:getElementById от внешнего не работает

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>hello</title> 
    <link rel="stylesheet" type="text/css" href='style.css'></link> 
</head> 
<body> 
    <script src='external.js'></script> 
</body> 
</html> 

external.js:

div1 = document.createElement("div"); 
div1.setAttribute('id', 'banana'); 
div1.innerHTML="<form id='form1' method='post' onsubmit='changeScreen()'> firstname: <input type='text' name='firstname' value='' /> <br> surname:<input type='text' name='surname' value='' /> <br> <input type='submit' id='button2' name='submit2' value='login'/></form>"; 
document.body.appendChild(div1); 


function changeScreen(){ 

    document.getElementById('banana').style.display='none'; 
} 

(я хочу практиковать по созданию элементов из внешних JS-файлов, так что это причина, по которой HTML выглядит что и я не хочу вообще его менять.)

Этот раздел создан успешно. но когда я отправляю, он просто сбрасывает значения в «firstname» и «username». Если я просто разместил несколько предупреждений в changeScreen(), он показывает их. tnx заранее для любых идей (извиняюсь за плохой английский тоже)!

+0

Попробуйте добавить 'вернуть false' в файл' 'функции changeScreen() и' onsubmit = "возвращение changeScreen()" 'так что предотвращает подачу нормальной формы – Phil

+0

я рекомендовал бы изменения' div1.setAttribute ('идентификатор' , 'banana'), 'to' div1.id = 'banana'; '. Кажется странным использовать атрибут для косвенного набора идентификатора элемента, когда вы можете просто установить его напрямую, если только вы не устанавливаете прямо в HTML. – Paulpro

ответ

4

Это потому, что ваша форма публикуется на том же URL-адресе, что и при обновлении. Чтобы остаться на одной странице после отправки, добавьте return false; в свой код.

div1 = document.createElement("div"); 
div1.setAttribute('id', 'banana'); 
div1.innerHTML="<form id='form1' method='post' onsubmit='return changeScreen();'> firstname: <input type='text' name='firstname' value='' /> <br> surname:<input type='text' name='surname' value='' /> <br> <input type='submit' id='button2' name='submit2' value='login'/></form>"; 
document.body.appendChild(div1); 
function changeScreen(){ 

    document.getElementById('banana').style.display='none'; 

    return false; 
} 
+0

спасибо! но я хотел скрыть div, я редактировал – user2637293

+0

@ user3729959 просто изменил 'block' на 'none' –

Смежные вопросы