logo
27.03.2019 16:36
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.
27.03.2019 19:11
2
Tady je příklad, akorát to dělá jenom to, co je psáno: https://jsfiddle.net/Jehuty/j6tq8Lkw/
27.03.2019 19:16
3
Ešte by sa mali mená zoradovať podľa abecedy...
27.03.2019 19:46
4
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).
27.03.2019 20:11
5
Vaša rada pomohla, veľmi pekne ďakujem! Pridávam hodnotenie!