Witam, założyłem się z kolegą kto zrobi lepsza witrynę do końca roku (obaj uczymy się HTML i JS od niedawna i chcieliśmy przekonać się ile umiemy). Ja wpadłem na pomysł aby zrobić stronę, w której na początku losowane są pary osób (kto z kim zagra w grę zwaną piłka nożna głowami) a następnie są one wyświetlane w divie"środek". Dodatkowo na "środku" możemy wpisać już rozegrany mecz, podając wynik a następnie powinien on się przenieś do diva"lewa" >> ostatnie mecze i wyświetlić w nim ostatnie mecze + wynik. Z lewej strony wyświetlane będą trzy ostatnie mecze a po dodaniu rozegranego meczu w divie"lewa" >> ostatnie mecze pojawia on się a pozostałe przesuwają się w dół. Niestety o ile z wyglądem poradziłem sobie jako tako (jedyny problem to fakt, że w przeglądarce na zbadaj element okazało się, że o ile div"lewo" i "środek" faktycznie jest poprawny(jest to lewa i środkowa część strony, o tyle div'a "prawo" mimo, że jest w nim jedynie div"ad" z reklamą to wykrywa go jako div "lewy" i "środkowy" tak jakby połączył się z innymi divami), o tyle ze skryptami nie mam pojęcia jak zacząć. Na razie próbowałem stworzyć system losowania przy załadowaniu strony (onload) ale niestety nie wyświetla on wylosowanych par na środku. Dodam dodatkowo Screen'a z opisem o co mi dokładnie chodzi. Z góry dziękuje i przepraszam za długi tekst ale nie umiem tego inaczej wytłumaczyć.
<!Doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Wyniki Head Soccer na Żywo</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script>
var p = Patryk-Kamil.B
var i = Patryk-Kamil.G
var u = Patryk-Kacper
var y = Kamil.B-Kamil.G
var t = Kamil.B-Kacper
var r = Kamil.G-Kacper
updatel()
{
var a;
var b;
var c;
}
updatep()
{
var g =
document.getElementById("p").innerHTML = g;
var h;
var i;
var j;
var k;
}
function losowanie() {
var x = Math.floor((Math.random() * 6) + 1);
if(x == 1) var p = Patryk-Kamil.B;
else if(x == 2) var p = Patryk-Kamil.G;
else if(x == 3) var p = Kamil.G-Kamil.B;
else if(x == 4) var p = Kamil.G-Kacper;
else if(x == 5) var p = Kacper-Kamil.B;
else {var p = Patryk-Kacper;}
document.getElementById("p").innerHTML = p;
var x1 = Math.floor((Math.random() * 6) + 1);
if (x1 == p) continue;
if(x1 == 1) var i = Patryk-Kamil.B;
else if(x1 == 2) var i = Patryk-Kamil.G;
else if(x1 == 3) var i = Kamil.G-Kamil.B;
else if(x1 == 4) var i = Kamil.G-Kacper;
else if(x1 == 5) var i = Kacper-Kamil.B;
else {var i = Patryk-Kacper;}
document.getElementById("i").innerHTML = i;
var x2 = Math.floor((Math.random() * 6) + 1);
if (x1 == i) continue;
if(x2 == 1) var u = Patryk-Kamil.B;
else if(x2 == 2) var u = Patryk-Kamil.G;
else if(x2 == 3) var u = Kamil.G-Kamil.B;
else if(x2 == 4) var u = Kamil.G-Kacper;
else if(x2 == 5) var u = Kacper-Kamil.B;
else {var u = Patryk-Kacper;}
document.getElementById("u").innerHTML = u;
var x3 = Math.floor((Math.random() * 6) + 1);
if (x1 == u) continue;
if(x3 == 1) var y = Patryk-Kamil.B;
else if(x3 == 2) var y = Patryk-Kamil.G;
else if(x3 == 3) var y = Kamil.G-Kamil.B;
else if(x3 == 4) var y = Kamil.G-Kacper;
else if(x3 == 5) var y = Kacper-Kamil.B;
else {var y = Patryk-Kacper;}
document.getElementById("y").innerHTML = y;
var x4 = Math.floor((Math.random() * 6) + 1);
if (x1 == y) continue;
if(x4 == 1) var t = Patryk-Kamil.B;
else if(x4 == 2) var t = Patryk-Kamil.G;
else if(x4 == 3) var t = Kamil.G-Kamil.B;
else if(x4 == 4) var t = Kamil.G-Kacper;
else if(x4 == 5) var t = Kacper-Kamil.B;
else {var t = Patryk-Kacper;}
document.getElementById("t").innerHTML = t;
var x5 = Math.floor((Math.random() * 6) + 1);
if (x1 == t) continue;
if(x5 == 1) var r = Patryk-Kamil.B;
else if(x5 == 2) var r = Patryk-Kamil.G;
else if(x5 == 3) var r = Kamil.G-Kamil.B;
else if(x5 == 4) var r = Kamil.G-Kacper;
else if(x5 == 5) var r = Kacper-Kamil.B;
else {var r = Patryk-Kacper;}
document.getElementById("r").innerHTML = r;
}
</script>
</head>
<body onload="losowanie()">
<div id="container">
<div id="lewo">
<div id="ostatnie">Wyniki ostatnich meczów:
<div id="omecze"><br>Patryk 2:0 Kamil.B</div>
<div id="omecze"><br>Patryk 2:0 Kamil.B</div>
<div id="omecze"><br>Patryk 2:0 Kamil.B</div>
</div>
<div id="kontakt"><b> Kontakt</b><a href="https://www.facebook.com/mojfb" target="_blank" title="Odwiedź mnie na FB!"><i class="demo-icon icon-facebook"></i></a><a title="Masz pytanie?? Napisz do mnie na adres: 20patryk01c@gmail.com"><i class="demo-icon icon-mail"></i></a></div>
</div>
<div id="srodek">
<center> <div id="logo">⚽Turniej Piłka Nożna Głowami⚽</div>
<div id="napis"><u>Nadchodzące mecze:</u></div>
<div id="nadch">
<div id="pmecz">
<p id="r"></p> <button onclick="updatep()"> Mecz już rozegrany? Wpisz odpowiedni wynik i kliknij mnie!</button> <input id="ile" type="text" size=1 maxlength="1"> : <input id="do" type="text" size=1 maxlength="1">
</div>
<p id="p"></p>
<p id="t"></p>
<p id="i"></p>
<p id="u"></p>
<p id="y"></p>
</div></center>
</div>
<div id="prawo">
<a href="https://www.efortuna.pl/pl/strona_glowna/" target="_blank"><img src="img/AD.png"></a> </div>
</div>
</body>
</html>
body
{
background-image: url("img/tlo.png");
font-family: 'Lobster', cursive;
height: auto;
}
#container
{
width: 1330px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top:20px;
}
#lewo
{
float: left;
width: 190px;
height: 610px;
border: 5px solid;
background-color: light-green;
padding: 0px;
}
#ostatnie
{
width: 170px;
height: 400px;
padding: 10px;
border: 5px solid;
background-color: #006600;
font-size:50px;
}
#omecze
{
font-size: 21px;
}
#kontakt
{
width: 170px;
height: 150px;
padding: 10px;
border: 5px solid;
border-right: 0px;
border-color: black;
font-size: 50px;
text-align: center;
color: #0033CC;
background-color: #00FF33;
}
#srodek
{
float: left;
width: 860px;
height:604px;
font-size: 40px;
border: 8px solid;
background-color: #00CC33
}
#nadch
{
text-align: center;
}
#napis
{
width: 320px;
background-color:lightgray;
padding: 30px;
border: 5px solid;
}
#pmecz
{
width: 850px;
height: 150px;
border: 5px solid;
{
#logo
{
width: 800px;
height 50px;
background-color: green;
margin-left: auto;
margin-right: auto;
font-size: 46px;
border: 5px dotted;
border-color: white;
border-width: 25px;
text-align: center;
letter-spacing: 5px;
padding: 5px;
border-bottom: 5px solid;
}
a:visited
{
color: #0033CC;
}
