<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
<style>
ul#zobrazenePole {
display:flex;
list-style-type: none;
flex-wrap: wrap;
}
ul#zobrazenePole li {
padding:0.5em;
margin:0.3em 1em;
border:1px solid grey;
}
</style>
<script>
/* <![CDATA[ */
/* Sem prijde javascript kod */
var mojePole = []
function vymazPole(){
/* todo: funkce ktera z mojePole odstrani vsechno...
... nebo ktera pole nastavi opet na prazdne pole :)
*/
// po uspesne zmene znovu pole zobrazime
aktualizujVypis()
}
function pocetPrvku(){
/* todo: funkce která spočítá prvky */
document.getElementById('vysledek').innerHTML = "zde bude počet prvků :)"
}
function maximum(){
/* todo: funkce najde maximální prvek */
/* todo: A vypíše do elementu vysledek (podobne jako funkce pocetPrvku) */
}
function pridej(prvek){
mojePole.push(prvek)
aktualizujVypis()
}
/*
Funkce aktualizujVypis vypise vsechny prvky pole do dokumentu.
Tato funkce je hotova (dela to co ma), ale muzete si s ni experimentovat
*/
function aktualizujVypis(){
var kontejner = document.getElementById('zobrazenePole')
// Smazu vse co se vypisuje
kontejner.innerHTML = ''
// Pruchod polem prvek po prvku
for (var i=0;i<mojePole.length; i++){
// Tvorim jedno policko
var zaznam = document.createElement('li')
// Nastavuji obsah policka na obsah bunky pole
zaznam.innerHTML = mojePole[i]
// Pridavam policko do seznamu
kontejner.appendChild(zaznam)
}
}
/* ]]> */
</script>
</head>
<body>
<p><label for="cislo">Číslo</label> <input type="number" id="cislo" name="cislo"></p>
<p><input type="submit" value="pridej" onclick="document.getElementById('cislo').value && pridej(parseInt(document.getElementById('cislo').value))"></p>
<p><input type="submit" value="vymazPole" onclick="vymazPole()"></p>
<p><input type="submit" value="pocetPrvku" onclick="pocetPrvku()"></p>
<p><input type="submit" value="maximum" onclick="maximum()"></p>
<p id="vysledek"></p>
<ul id="zobrazenePole"></ul>
</body>
</html>