• 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
173 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 187 wizyt
pytanie zadane 11 sierpnia 2018 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)
0 głosów
1 odpowiedź 141 wizyt
pytanie zadane 5 lutego 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 155 wizyt
pytanie zadane 14 czerwca 2022 w Sprzęt komputerowy przez niezalogowany

92,666 zapytań

141,564 odpowiedzi

320,022 komentarzy

62,033 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!

...