Удаление элемента массива и выдача случайного элемента в строку

209

27 ноября 2021, 19:00

Я совсем новичок и имею проблемы с синтаксисом и русским языком . Помогите сделать чтобы программа загружала список имен из массив и при нажатии на кнопку которую вы увидите справа от имен Это имя удаляется из массива... Далее из массива имен берется случайное и выдается в строку снизу от кнопки... возможно вы посчитаете что я идиот, знайте что это правда ...

<!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 rel="stylesheet" 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 1

Код, согласно тому, что я понял из описания:

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>

На всякий случай:

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; 
}