js

4 years ago · 2cd6d9a04c
2 changed files with 72 additions and 0 deletions
--- a/image.jpg
+++ b/image.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>
 <body>
    <h1>opakování js</h1>
    <div class="obrazek"></div>
    <div class="obrazek2"></div>
    <ul class="jmena"></ul>
     <script>
         //vytvoření obrázku + vložení do dokumentu
        /* let obr = document.querySelector(".obrazek");
        let img = document.createElement("img");
        img.setAttribute("src", "image.jpg")
        obr.appendChild(img); */
        //2. způsob
        let obr2 = document.querySelector(".obrazek2");
        obr2.innerHTML += '<img src="image.jpg">';
        //3. jquery
        //$("kontejner3").append('<img src="image.jpg">');
        //odrážkový sezna, z pole a vložení do dokumentu
        /* let pole = ["Petr", "Pet", "Pe", "P",];
        let jmena = document.querySelector(".jmena");
        for (let index = 0; index < pole.length; index++) {
            const element = pole[index];
            jmena.innerHTML += '<li>' + element + '</li>' ;
        } */
        //přidat tlačítko pro možnost odstranění položky ze seznamu 
        let pole = ["Petr", "Pet", "Pe", "P",];
        let jmena = document.querySelector(".jmena");
        for (let index = 0; index < pole.length; index++) {
            const element = pole[index];
            jmena.innerHTML += '<li id="Jmeno' + index +'">' + element + '<button data-id="#Jmeno' + index +'">x</button></li>' ;
        }
        let tlacitka = document.querySelectorAll(".jmena button");
        for (let index = 0; index < tlacitka.length; index++) {
            const element = tlacitka[index];
            element.addEventListener("click", function() {
                let li = document.querySelector(this.dataset.id);
                li.remove();
                });
            }
     </script>
 </body>
 </html>