Układ strony, problemy z Javascript

pytanie zadane 2 stycznia 2020 w HTML i CSS przez FilOON Użytkownik (680 p.)

Witam, mam następujące pytania:

1) Co zrobić żeby odpowiedź po naciśnięciu przycisku "Sprawdź" pojawiała się w tym samym divie, w którym jest pole i sam przycisk?

2) Jak wyśrodkować pole oraz przycisk (div "check") w divie "content"? margin: auto; nie działa.

3) I tak ogólnie: czy sam template strony jest zrobiony poprawnie, i co ewentualnie mogę zrobić lepiej?

Z góry dzięki za każdą pomoc ;)

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Javascript test</title>
	
	<meta name="description" content="" />
	<meta name="keywords" content="test" />
	
	<link rel="stylesheet" href="style.css">
	
	<script type="text/javascript">
		
		function odliczanie()
		{
			var dzisiaj = new Date();
		
			var dzien = dzisiaj.getDate();
			var miesiac = dzisiaj.getMonth()+1;
			var rok = dzisiaj.getFullYear();
		
			var godzina = dzisiaj.getHours();
			var minuta = dzisiaj.getMinutes();
			var sekunda = dzisiaj.getSeconds();
		
			document.getElementById("zegar").innerHTML = 
			dzien+"/"+miesiac+"/"+rok+"|"+godzina+":"+minuta+":"+sekunda;
		
			setTimeout("odliczanie()",1000);
		}
	</script>
	
	<script type="text/javascript">
	
		function sprawdz()
		{
			var liczba = document.getElementById("pole").value;
		
			if(liczba>0) document.getElementById("wynik").innerHTML="dodatnia";
			else if(liczba<0) document.getElementById("wynik").innerHTML="ujemna";
			else if(liczba==0)document.getElementById("wynik").innerHTML="zero";
			else document.getElementById("wynik").innerHTML="To nie jest liczba";
		}
	</script>
	
</head>
<body onload="odliczanie();">

	<div id="container">
	
		<div id="nav">
		
			<p id="title">Javascript test</p>
			<div id="zegar"></div>

		</div>	
		<div id="content">
			
			<div id="check">
				<input type="text" id="pole"/>
				<input type="submit" value="Sprawdź" onclick="sprawdz()"/>
			</div>
			
		</div>
	
		<div id="wynik"></div>
	
	</div>
</body>
</html>

CSS:

body
{
	margin: 0;
}

#container
{
	width: 100%;
	margin: 0;
	position: relative;
}

#nav
{
	position: relative;
    top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	padding: 0px 0;
	background-color: #00BCD4;
}

#zegar
{
	color: white;
	font-family: Arial;
	font-size: 30px;
	font-weight: 700;
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translate(0, -50%)
}

#title
{
	color: white;
    font-family: Arial;
	font-size: 30px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: auto;
	padding: 0;
	transform: translate(-50%, -50%)
}

#content
{
	background-color: gray;
	width: 1200px;
	height: 200px;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}

#check
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}

1 odpowiedź

odpowiedź 3 stycznia 2020 przez ShiroUmizake Nałogowiec (46,300 p.)

1. Pewnie próbowałeś się odwoływać innerHTML albo textContent. Pierwszy wstawia elementDOM (tekst jest też elementem drzewa), drugi wstawia tekst jako textNode (możesz sprawdzić co się stanie jak wstawisz "<div></div>" :)). Poprawnie odwołując do kontrolera formularza powinieneś użyć: value. Szczegóły masz tutaj: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement. Jeżeli chcesz zostać dobrym JS Developerem radzę z tym mocno się zapoznać i traktować jak "biblię".

2. W drugim przypadku mówisz, kontenerowi hej mam 100% i potem jemu dziecku mówisz hej a ty nie masz marginesów. Ale szerokość dziedziczy w tym przypadku po rodzicu. Możesz jego szerokość ograniczyć po przez: max-width, min-width albo po prostu width.

3.Nie jest :). Przed wszystkim kontrolerom brakuje label przez to brakuje im focusu.