• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Układ strony, problemy z Javascript

Object Storage Arubacloud
0 głosów
175 wizyt
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ź

+1 głos
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.

  

Podobne pytania

0 głosów
0 odpowiedzi 194 wizyt
pytanie zadane 11 sierpnia 2018 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)
0 głosów
1 odpowiedź 145 wizyt
pytanie zadane 5 lutego 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 164 wizyt
pytanie zadane 14 czerwca 2022 w Sprzęt komputerowy przez niezalogowany

92,759 zapytań

141,682 odpowiedzi

320,457 komentarzy

62,104 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...