<form> i document.getElementById

pytanie zadane 3 września 2018 w JavaScript przez vneb Początkujący (490 p.)
zmienione kategorie 4 września 2018 przez Comandeer

Czemu <form> nie działa wstawiony przez document.getElementById? Czy da się coś z tym zrobić?

Na stronie wyświetla się zawartość formularza w odpowiednim divie, ale nie mogę wpisać loginu, bo kursor znika po próbie kliknięcia na input, a w lewym górnym rogu przeglądarki pojawia się podpowiedź inputa kiedy kliknę w submit, choć kliknięcie w podpowiedź nie działa, ani nawet kliknięcie w submita nie submituje.

kod html:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
	<title>Ala ma kota</title>
	<meta name="description" content="Ala ma kota, a kot ma Alę.">
	<meta name="keywords" content="Ala ma kota">
	<meta http-equiv="X-Ua-Compatibile" content="IE-edge,chrome=1">
  	<link rel="stylesheet" href="css/style.css">
 	<link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu|Oswald:200|Khand:300,400,500" rel="stylesheet">
	<script src="js/alamakota.js"></script>
</head>

<body>
<div class="main" id="mn">
	<h1>Ala ma kota</h1>
</div>
	
<div class="footer">
	<h2>Wszystkie prawa zastrzeżone &copy; 2018</h2>
</div>
</body>

</html>

js:

document.onclick = function()
{
document.getElementById('mn').innerHTML = "<div class=\"log_form\"><form action=\"zaloguj.php\" method=\"post\">Login: <input type=\"text\" name=\"login\"><br><br>Hasło: <input type=\"text\" name=\"haslo\"><br><br><input type=\"submit\" value=\"Zaloguj się\"></form></div>";

}

i css żeby ładnie wyświetlało:

body
{
	background-color:#112E41;
	font-family: 'Khand', sans-serif;
	font-size:16px;
	color:#3a5e78;
}

h2 
{
	font-size:16px;
	font-weight:300;
	font-size:24px;
	font-weight:500;
}

input
{
	margin-left:5px;
}

.footer > h2
{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
	text-align:center;
	letter-spacing:1.05px;
	font-weight:300;
	font-size:16px;
}

.main
{
	position:absolute;
	font-size:18px;
	color:gold;
	width:500px;
	min-height:90px;
	top:50%;
	left:50%;
	margin-left:-250px;
	margin-top:-70px;
	border: 1px dotted #3a5e78;
	border-radius:15px;
	text-align:center;
	transition-timing-function:linear;
	transition-duration:0.5s;
	letter-spacing:1px;
}

.main:hover
{
	background-color:#0D2B3D;
	cursor:pointer;
	transition-timing-function:linear;
	transition-duration:0.5s;
}

.log_form
{
	font-family: 'Khand', sans-serif;
	font-size:16px;
	padding: 20 0 0 0;
	border-radius:15px;
	color:#3a5e78;
}

2 odpowiedzi

odpowiedź 4 września 2018 przez hun1er76 Stary wyjadacz (11,960 p.)

Czemu <form> nie działa wstawiony przez document.getElementById

Jak już, wstawiany jest przez metodę innerHTML. Błąd jest w pierwszej linii kodu js, bo chyba nie celowo znajduje się tam zdarzenie onclick? Skutkuje to tym, że każde kliknięcie na stronie przeładowuje formularz.

Btw, ciągi znaków lepiej zapisywać za pomocą apostrofów lub backticków (`), wtedy nie trzeba bawić się w backslashe przy cudzysłowach.

odpowiedź 4 września 2018 przez radek024 Szeryf (77,160 p.)

Bardziej poszedłbym w kierunku ukrycia formularza, a następnie pokazania go po kliknięciu. Ponadto sposób w który go zaimplementowałeś jest bardzo błędny - nie używasz label czy hasło jest typu text. Poza tym - elementy tworzymy w inny sposób.

komentarz 4 września 2018 przez radek024 Szeryf (77,160 p.)

I kategorię zmień przy okazji :)

komentarz 8 września 2018 przez vneb Początkujący (490 p.)

@radek024, hasło typu text dla testów, co do label czy w ogóle błędów w htmlu to dopiero się uczę, a w zasadzie wracam po ponad 12-tu latach przerwy. Skończyłem dawno temu w czasach tabel. Składnia html będzie dopracowana. JS to w ogóle dla mnie prawie czarna magia, dopiero zaczynam.
A co do rozwiązania problemu to był zupełnie inny błąd, którego tu w kodzie JS nie wkleiłem (bo nie zdawałem sobie z niego sprawy), a mianowicie w jednej pętli FOR było >6 zamiast =6 i to powodowało ciągłe przeładowywanie strony (przebudowywanie DOM? tak to się nazywa?).
Z ukryciem formularza to rzecz oczywista, ale chciałem osiągnąć efekt ascetyczny w kodzie html, ot taka fanaberia. Koniec końców zrobiłem ukryty formularz.
A koniec końca końców to tylko wprawki, które pewnie nigdy nie ujrzą internetów.

@hun1er76 celowo, pomysł był taki, który potem zrealizowałem (lokalnie, bo internetu to nie zobaczyło), że przy każdym kliknięciu pojawiał się dymek przy kursorze myszy z "zabawnym" komentarzem, a po i-tym kliknięciu wyświetlał się formularz logowania (z linkiem do rejestracji).