Prodej projektu Duchod.cz - cena 550 tis Kč. Dále MojeFinance.cz, DuchodovaReforma.cz
Zobrazují se odpovědi 1 až 5 z 5

Tvorba menného zoznamu v JS

  1. Dobrý deň, potrebujem vytvoriť v HTML stránku s formulárom menného zoznamu, do ktorého zadám meno a priezvisko, následne sa mi pod formulárom vytvorí menný zoznam s menami a priezviskami pod seba, ktoré môžem v prípade potreby vymazať. Formulár a menný zoznam má byť v Javascripte. Vie mi niekto pomôcť za hodnotenie?

    Príklad, ktorý mená a priezviská v zozname dáva v jednom riadku, ale ja potrebujem pod seba + odstraňovanie mien zo zoznamu:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript: Add - Search - Remove Array Element</title>
    <meta charset="windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script>

    var myArr = [];
    function addElement()
    {
    var txt = document.getElementById ("myList");
    var txt = document.getElementById('txt').value;

    myArr.push(txt);

    document.getElementById('pgh').innerHTML = myArr;
    }

    function searchAndDeleteElement()
    {

    var txt = document.getElementById('txt').value;


    var index = myArr.indexOf(txt);


    if(index !== -1 )
    {
    myArr.splice(index,1);
    document.getElementById('pgh').innerHTML = myArr;
    }


    else{
    alert("Not Found");
    }
    }
    function list() {

    }
    </script>

    </head>
    <body>

    <input type="text" name="txt" id="txt"/>
    <ul id="myList"><li><p id="pgh"></p></li>
    </ul>
    <button onclick="addElement();">Push</button>
    <button onclick="searchAndDeleteElement();">search And Delete</button>

    <script>
    document.getElementById('pgh').innerHTML = myArr;
    </script>

    </body>
    </html>


    ---------- Příspěvek doplněn 27.03.2019 v 17:16 ----------

    Posun v príklade:
    Kód:
    <!DOCTYPE html>
    <html>
    <head>
      <title>Javascript - Príklad vytvorenia menného zoznamu</title>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <script type="text/javascript">
    
    
        window.onload=function(){
          
    var namesElement = document.getElementById('names');
    var nameInput = document.getElementById('name');
    var namesList = [];
    
    document.getElementById('enter').addEventListener('click', function() {
        var newName = nameInput.value.trim();
        // Only add when we have a value.
        if (newName) {
          namesList.push(newName);
          for (var i = 0, n; n = namesList[i]; i++) {
              var liElement = document.createElement('li');
              liElement.innerText = n;
          }
          namesElement.appendChild(liElement);
        }
        // Let's blank out the input ready for the next
        nameInput.value = '';
        // ...and focus it!
        nameInput.focus();
    });
    
        }
    
    </script>
    
    </head>
    <body>
        <input id="name" type="text" placeholder="Zadaj meno a priezvisko">
    <button id="enter">Pridať</button>
    <br>
    <br>
    <ul id="names"></ul>
    
      
      <script>
        // tell the embed parent frame the height of the content
        if (window.parent && window.parent.parent){
          window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "ccyo77ep"
          }], "*")
        }
    
        // always overwrite window.name, in case users try to set it manually
        window.name = "result"
      </script>
    </body>
    </html>


    ---------- Příspěvek doplněn 27.03.2019 v 17:17 ----------

    Ešte potrebujem ku každému menu a priezvisku v mennom zozname pridať krížik, ktorým by sa dalo meno a priezvisko odstrániť, samozrejme v javascripte.
    Naposledy upravil Jooguda : 27.03.2019 v 16:57

  2. Co se právě děje na Webtrhu?
  3. Tady je příklad, akorát to dělá jenom to, co je psáno: https://jsfiddle.net/Jehuty/j6tq8Lkw/

  4. Ešte by sa mali mená zoradovať podľa abecedy...

  5. Díval jsem se a bylo to celé trochu jiné. Toto je OK: https://jsfiddle.net/Jehuty/up3y5bgh/ . Nutno vzít v potaz, že pokud chcete targetovat starší prohlížeče, měl byste projet JS přes babel (třeba tady https://babeljs.io/repl).

  6. Vaša rada pomohla, veľmi pekne ďakujem! Pridávam hodnotenie!

Hostujeme u Server powered by TELE3