Cześć.
Napisałem stronę do losowania tytułów książek. W skrypcie, oprócz losowania, zawarłem również sprawdzanie czy dane pole nie jest puste, jeśli jest to aby je wyciął z tablicy. Niestety po wycięciu nadal losuje puste miejsca. I robi to tylko w przypadku, kiedy mamy więcej pól np. 7 i tylko 3 losowo zapełnione.
Proszę o pomoc ;)
Pozdrawiam, Konrad
PS. Funkcja losująca to funkcja rob(), w konsoli pojawia się wylosowana liczba, a wylosowany tytuł powinien pojawić się pod "Losowanie wygrywa...".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>What to read next?</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
<div id="container-head" class="container-fluid">
<div id="header">WHAT TO READ NEXT?</div>
<div id="zz">
<div id="txt">Wylosuj swoją następną książkę</div>
<div id="down"><span class="glyphicon glyphicon-chevron-down"></span></div>
</div>
</div>
<div class="container-fluid">
<div class="container pad" id="opis">
<h1 class="tyt">Gdzie jestem?</h1>
<p id="o">Skończyłeś czytać książkę i nie wiesz na którą następnie się zdecydować? Pozwól, że nasz zaawansowany bot z napędem jonicznym oparty na skomplikowanych algorytmach i skryptach dokona wyboru za Ciebie!</p>
</div>
</div>
<div id="wpisz" class="container-fluid panel-con">
<div class="container pad">
<h1 id="tyt2" class="tyt">Po prostu wpisz tytuły!</h1>
<div id="ile" class="form-group form-group-lg">
<input type="text" class="form-control inputs">
<input type="text" class="form-control inputs">
</div>
<div id="przyciski" class="row container">
<div id="dodaj" class="col-sm-6" onclick="dodaj()"><span class="glyphicon glyphicon-plus"></span> Dodaj</div>
<div id="usun-disactive" class="col-sm-5 col-sm-offset-1 gz"><span class="glyphicon glyphicon-remove"></span> Usuń</div>
</div>
<div class="row" id="guzik"><button type="button" id="losuj" class="btn btn-primary col-xs-4 col-xs-offset-4" onclick="rob()">Losuj!</button></div>
<div id="wygrana" class="nie">
Losowanie wygrywa...<br>
<h2 id="tyt-wyg">Tytuł</h2>
Nie trać więcej czasu, bierz i czytaj! ;)
</div>
</div>
</div>
<div class="container-fluid panel-con">
<div class="container pad">
<h1 class="tyt" id="tyt3">Twórcy</h1>
<div id="mik" class="panel-con">
<div class="row container">
<div id="kon" class="col-sm-3 col-sm-offset-3">
<div class="zdj" id="kon-zdj"></div>
<div class="imie">Konrad</div>
</div>
<div id="mac" class="col-sm-3">
<div class="zdj" id="mac-zdj"></div>
<div class="imie">Maciek</div>
</div>
</div>
</div>
<div id="zap">
<h3 id="zap2">Zajrzyj na naszego książkowego bloga!</h3>
<div id="mikbooks-zdj"><a href="http://mikbooks.esy.es/"><img src="zdj/mikbooks.png"></a></div>
</div>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function dodaj()
{
var parent = document.getElementById("ile");
var input = document.createElement("input");
input.classList.add("form-control");
input.classList.add("inputs");
parent.append(input);
spr();
}
function usun()
{
document.getElementsByClassName("inputs")[document.getElementById("ile").children.length-1].remove();
spr();
}
function spr(){
var i = document.getElementsByClassName("gz")[0];
if (document.getElementById("ile").children.length>2) {
i.id = "usun";
i.addEventListener("click",usun);
}
if (document.getElementById("ile").children.length==2) {
i.id = "usun-disactive";
i.removeEventListener("click",usun);
}
}
function rob(){
if (document.getElementById("ile").children.length==2 && document.getElementsByClassName("inputs")[0].value=='' || document.getElementsByClassName("inputs")[1].value=='') alert("Podaj conajmniej 2 tytuły!");
else{
var ile = document.getElementById("ile").children.length;
var pula = new Array();
for(var j=0; j<=ile-1; j++)
{
pula[j] = document.getElementsByClassName("inputs")[j].value;
}
for(var j=0; j<=ile-1; j++)
{
if (pula[j]=='') pula.splice(j,1);
}
ile = pula.length;
var w = Math.floor(Math.random() * ile);
console.log(pula.indexOf("2"));
console.log(w);
document.getElementById("tyt-wyg").innerHTML = pula[w];
document.getElementById("wygrana").classList.remove("nie");
}
}
</script>
