Попытка добавить новые объекты в алфавитный список "div"

ProgramBox

Попытка добавить новые объекты в алфавитный список «div»

Post author:admin
Запись опубликована:15 ноября, 2022
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

итак, у меня есть пустой массив, как пользователь, вы можете добавлять новые объекты в массив. В html-файле у меня есть список div, отсортированных в алфавитном порядке. Я хочу, чтобы каждый новый объект, созданный пользователем, добавлялся в div с помощью innerHTML, который равен первой букве свойства «name» в новом объекте, созданном пользователем. Я не могу найти алгоритм для этого, может кто-нибудь помочь сделать эту работу?

Существует HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script async src="music.app.js"></script>
    <link rel="stylesheet" href="music.app.css">
    <title>music app</title>
</head>
<body>
    <nav>
        <div>Songs</div>
        <div>Playing</div>
        <div>Playlist</div>
    </nav>
 <div class="add-sort-continer">   
    <div class="sort-nav">=
     <ul>
        <li>Name</li>
        <li>Artist</li>
        <li>Alboms</li>
     </ul>
    </div>
    <button class="add-song"> </button>
 </div>
 <div class="sort-continer">
<div class="sort-name-continer">A</div>
<div class="sort-name-continer">B</div>
<div class="sort-name-continer">C</div>
<div class="sort-name-continer">D</div>
<div class="sort-name-continer">E</div>
<div class="sort-name-continer">F</div>
<div class="sort-name-continer">G</div>
<div class="sort-name-continer">H</div>
<div class="sort-name-continer">I</div>
<div class="sort-name-continer">J</div>
<div class="sort-name-continer">K</div>
<div class="sort-name-continer">L</div>
<div class="sort-name-continer">M</div>
<div class="sort-name-continer">N</div>
<div class="sort-name-continer">O</div>
<div class="sort-name-continer">P</div>
<div class="sort-name-continer">Q</div>
<div class="sort-name-continer">R</div>
<div class="sort-name-continer">S</div>
<div class="sort-name-continer">T</div>
<div class="sort-name-continer">U</div>
<div class="sort-name-continer">V</div>
<div class="sort-name-continer">W</div>
<div class="sort-name-continer">X</div>
<div class="sort-name-continer">Y</div>
<div class="sort-name-continer">Z</div>
<div class="sort-name-continer">@</div>
</div>

<div class="add-song-continer" id="add-song-continer">
    <form id="add-song-form">
      <button class="close-btn" id="close-add-song">X</button>
      <h1 class="h1-add-Song" >Add your song baby</h1>
      <br>
      <input type="text" class="song-name-add" placeholder="Song Name" value=""><br>
      <br>
      <input type="text" class="artist-name-add" placeholder="Artist Name"><br>
      <br>
      <input type="text" class="albom-name-add" placeholder="Albom Name"><br>
      <br>
      <input type="text" class="mp3-file-add" placeholder="Song File"><br>
      <br>
      <input type="text" class="img-add" placeholder="Image"><br>
      <button class="add-song-btn" id = "add-song-btn"> Add Song</button>
    </form>
  </div>

</body>
</html>

Развернуть фрагмент

и это JavaScript
Я должен предупредить вас, что файл js плохо организован.
Кроме того, я попытался взять другие свойства из нового объекта, созданного пользователем, и вставить их в новый div как innerHTML, но вы можете игнорировать это, если хотите.

 let songs = [];

const AddSongFunction = (ev) => {
  ev.preventDefault();

   let song = { 
      name: document.querySelector(".song-name-add").value, 
      artist: document.querySelector(".artist-name-add").value,
      albom: document.querySelector(".albom-name-add").value,
      fill: document.querySelector(".mp3-file-add").value,
      img: document.querySelector(".img-add").value
      };
      
  songs.push(song);
  document.querySelector("form").reset();

    console.log(songs);
    }
   

  document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("add-song-btn").addEventListener("click", AddSongFunction )
    
  });

for(let i = 0; i > songs.length;   i){
  appendNewSongToList = () => {
    let newSongDiv = document.createElement('div');
    newSongDiv.className.add("song-continer");
    newSongDiv.innerHTML = `<img class='songImg' url=${this.img}>
    <div class="song-info"> ${this.name}  ${this.artist}  ${this.albom}</div>`;

    if (document.querySelector(".sort-name-continer").innerHTML == this.name.index){
      let sortByName;
      sortByName = document.querySelector(".sort-name-continer");  
  }else{
    defaultSortName = document.querySelector(".sort-name-continer").innerHTML('@');
    sortByName = defaultSortName
  };
  sortByName.appendChild(newSongDiv);
  }; 
  appendNewSongToList();
};

Развернуть фрагмент

В любом случае я очень открыт для новых предложений по улучшению в целом, и я также открыт для критики, заранее большое вам спасибо 😊

Ответ №1:

Если вы можете найти способ добавить дополнительные данные в свои метки DIV сортировки (например, a data-attribute ), это будет легко сделать с помощью следующего решения.

Пожалуйста, подумайте, как я изменил HTML-часть кода. Я добавил data-attr вызываемый sortletter и передаваемый в точности букву, которую вы используете в содержимом div. Вот так:

 <div class="sort-name-continer" data-sortletter="A">A</div>

и позже я использовал этот атрибут для выбора правильного элемента:

 document.querySelector(`[data-sortletter="A"]`)

Пожалуйста, ознакомьтесь с примером ниже:

 function handleAddSongBtn(){
  const songObj = {
    name: .value, 
    artist: document.querySelector(".artist-name-add").value,
    album: document.querySelector(".album-name-add").value,
    fill: document.querySelector(".mp3-file-add").value,
    img: document.querySelector(".img-add").value
  }
  
  /** 
  * Here is where you select the proper sort label DIV by
  * using `data-sortletter` attribute on the DIVs
  * and first letter of new song's name property
  */
  const sortLabelBox = document.querySelector(`[data-sortletter="${songObj.name.charAt(0)}"]`)
  
  // If any sort label with the given letter exists
  if(sortLabelBox){
    // Then add a new DIV after the sort label DIV
    
    const newSongDiv = document.createElement('div')
    // You can add proper data from song object to this new DIV
    
    // Then do as follow to add this div after the sort label
    sortLabelBox.parentNode.insertAfter(newSongDiv, sortLabelBox)
  }
}

document.addEventListener('click', handleAddSongBtn)

 <div class="sort-continer">
  <div class="sort-name-continer" data-sortletter="A">A</div>
  <div class="sort-name-continer" data-sortletter="B">B</div>
  <div class="sort-name-continer" data-sortletter="C">C</div>
  <div class="sort-name-continer" data-sortletter="D">D</div>
</div>
  
<button class="add-song-btn" id = "add-song-btn">Add Song</button>

Развернуть фрагмент

Альтернативное решение:
в случае, если вы не можете изменить свой HTML-код, чтобы добавить data-attributes

Если вы не можете получить эти data-attribute объекты, вам может потребоваться выполнить цикл, чтобы найти правильную метку DIV. В вашем коде JavaScript вместо запроса, выбирающего DIV data-attr , выполните следующие действия:

 const sortLabelBoxes = document.querySelectorAll('.sort-name-continer')
let properSortLabelBox;

for(let i = 0; i < sortLabelBoxes.length; i  ){
    // if innerHTML equals first letter of the new song
    if(sortLabelBoxes[i].innerHTML === songObj.name.charAt(0)){
       properSortLabelBox = sortLabelBoxes[i]
    }
}

1. Привет, сначала спасибо за ваше время, это код, который я написал code const sortLabelBoxes = document . querySelectorAll(‘.sort-name-continer’) пусть properSortLabelBox; for(пусть i = 0; i < Сортировочные метки. длина; i ){ // если innerHTML равен первой букве новой песни, если (sortLabelBoxes[i].innerHTML === songObj.name.charAt(0)){ properSortLabelBox = sortLabelBoxes[i] } } если у меня есть какие-либо ошибки, я буду рад узнать, кроме тогокуда мне поместить код в моем исходном коде? потому что я не смог заставить код работать на меня.