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;
}