• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
195 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 214 wizyt
pytanie zadane 11 sierpnia 2018 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)
0 głosów
1 odpowiedź 201 wizyt
pytanie zadane 5 lutego 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)
0 głosów
2 odpowiedzi 208 wizyt
pytanie zadane 14 czerwca 2022 w Sprzęt komputerowy przez niezalogowany

93,335 zapytań

142,330 odpowiedzi

322,416 komentarzy

62,669 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...