javascript – Removing an array element and giving a random element to a string

Question:

I'm completely new and have problems with syntax and Russian. Help me to make the program load the list of names from the array and when you click on the button that you will see to the right of the names This name is removed from the array… Next, a random name is taken from the array of names and displayed in the line below the button… you might think that I'm an idiot know it's true…

<!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">
    <link type="text/css" href="style.css">
    <title>Fucking wheel</title>
</head>
<body onload="descargarNombres()">

   <ul>
        <li id='namesAll'>
        </li>
   </ul>
  <button id="btn">Elegir</button>
</body>
<div class="line">  
</div>



<script type="text/javascript">

console.log('hola, amigüitos')


var names = [' Yeray',' Vlad',' Unai',' Sergio',' Naiara',' Sehili',' Saadi',' Yassine',' Melanie',' María',' Luis',' Jose',' Imanol',' Haimar',' Gontzal',' Elbo',' Diego',' César O.',' César C.',' Antonia',' Andoni']

function descargarNombres(){

  for (i = 0; i < names.length; i++) {
      document.getElementById('namesAll').insertAdjacentHTML('beforeend', '<li>' + names[i] + '<a id="btn_delete" href="javascript:deleteName"><img src="img/remove.png" alt="delete" width="13px"></img></a></li>')
  }



}

// function delete name 

  a.oneclick = function deleteName (index){ 
let removed = names.splice(index,1) 
}


//button elegir
     let btn = document.getElementById("btn")

btn.addEventListener("click",function (event) {

     
     let randomN = Math.floor(Math.random()* 21)
    console.log(randomN)
     let result = names[randomN]
    console.log(result)

     document.getElementByClassName("line")[0].innerHTML= result 

   })
 console.log('random nombre sale')

</script>




</html>

Answer:

The code, according to what I understood from the description:

var names = [' Yeray', ' Vlad', ' Unai', ' Sergio', ' Naiara', ' Sehili', ' Saadi', ' Yassine', ' Melanie', ' María', ' Luis', ' Jose', ' Imanol', ' Haimar', ' Gontzal', ' Elbo', ' Diego', ' César O.', ' César C.', ' Antonia', ' Andoni'];

var items = [];

var list = document.querySelector('ul');

function createItems() {
  names.forEach((el) => {
    var li = document.createElement('li');
    var div = document.createElement('div');
    var button = document.createElement('button');
    button.addEventListener('click', removeName)
    button.innerText = 'delete';
    div.innerText = el;
    li.append(div, button);
    items.push(li);
  })
}

function showItems() {
  items.forEach(item => {
    list.append(item);
  })
}

function removeName(e) {
  names = names.filter(name => {
    return name.trim() != e.target.previousElementSibling.innerText
  })
  e.target.previousElementSibling.innerText = '';
  e.target.removeEventListener('click', removeName);
  appendRandomNameBelowButton(getRandomNameFromArray(), e.target.parentNode);
}

function getRandomNameFromArray() {
  var n = Math.floor(Math.random() * names.length);
  return names[n];
}

function appendRandomNameBelowButton(name, parent) {
  var span = document.createElement('span');
  span.innerText = name;
  parent.append(span)
}

createItems();
showItems();
* {
  margin: 0;
  padding: 0;
}

ul {
  margin: auto;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "name button" "name randomName";
  margin-bottom: 1rem;
  justify-content: space-between;
}

div {
  word-break: break-all;
  grid-area: name;
}

button {
  grid-area: button;
}

span {
  grid-area: randomName;
  text-align: center;
}
<ul></ul>

Just in case:

var names = [' Yeray', ' Vlad', ' Unai', ' Sergio', ' Naiara', ' Sehili', ' Saadi', ' Yassine', ' Melanie', ' María', ' Luis', ' Jose', ' Imanol', ' Haimar', ' Gontzal', ' Elbo', ' Diego', ' César O.', ' César C.', ' Antonia', ' Andoni'];

var items = [];

var list = document.querySelector('ul');

function showItems() {
  clearList();

  items.forEach(item => {
    list.append(item);
  })
}


function createItems() {
  names.forEach((el) => {
    var li = document.createElement('li');
    var div = document.createElement('div');
    var button = document.createElement('button');
    button.addEventListener('click', removeItem)
    button.innerText = 'delete';
    div.innerText = el;
    li.append(div, button);
    items.push(li);
  })
}

function removeItem(e) {
  items = items.filter(item => {
    return item != e.target.parentNode
  })
  showItems();
}

function clearList() {
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }
}

createItems();
showItems();
* {
  margin: 0;
  padding: 0;
}

ul {
  margin: auto;
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  width: 100%;
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
}

div {
  word-break: break-all;
}
<ul></ul>
Post Views: 0
Scroll to Top