Thiết kế website giá rẻ

Question

I am creating a draggable tier list that loads a list in a text file and then generates cards with the text from each line. The cards can then be dragged from a card bank on the bottom into rows of tiers. Everything works fine with cards I create manually in the html file, but when I attempt to drag one of the generated cards I get the error below:

cards.js:12 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

HTML:

<!DOCTYPE html> 
<html>
    <head>
        <title>Tier List</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Poetsen+One&display=swap');
        </style>
        
    </head>
    <body>
        <h1 class="noto-sans-title">Tier List</h1>
        <div id="board">
            <div class="rowholder">
                <div class="label noto-sans-title pink">
                    SSS
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title red">
                    S
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title orange">
                    A
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                    <div class="card" id="card7" draggable="true">Test</div>
                    <div class="card" id="card8" draggable="true">????</div>
                    <div class="card" id="card9" draggable="true">????</div>
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title gold">
                    B
                </div>
                <div class="row" ondrop="onDrop(event, this)">

                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title yellow">
                    C
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                    
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title green">
                    D
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                    
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title blue">
                    E
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                    
                </div>
            </div>
            <div class="rowholder">
                <div class="label noto-sans-title purple">
                    F
                </div>
                <div class="row" ondrop="onDrop(event, this)">
                    
                </div>
            </div>
        </div>
        <h2 class="noto-sans-title">Select</h2>
        <div id="bank">
            
            <div class="rowholder">
                <div class="row" id="bankRow" ondrop="onDrop(event, this)">

                </div>
            </div>
        </div>
    </body>
    <script src="./cards.js"></script>
</html>

Javascript:

var cardIndex = 0;

fetch('data1.txt')
  .then(response => response.text())
  .then(text => text.trim().split('n'))
  .then((tagsImported) => {
    tagsImported.forEach((element) => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.id = 'card'+cardIndex++;
        card.setAttribute('draggable', 'true');
        card.innerHTML = element;
        console.log(element);
        const bank = document.getElementById('bankRow');
        bank.appendChild(card);
    });
  });
  
  const rows = document.querySelectorAll('.row');

  const allowDrop = (event) => {
      event.preventDefault();
  }
  
  const onDrop = (event, element) => {
      event.preventDefault();
      const draggedCardId = event.dataTransfer.getData('id');
      const draggedCard = document.getElementById(draggedCardId);
      console.log(draggedCardId);
      element.appendChild(draggedCard);
      console.log('Element Dropped');
  }
  
  rows.forEach((row) => {
      row.ondragover = allowDrop;
  })
  
  const card = document.querySelectorAll('.card');
  
  const onDragStart = (event) => {
      console.log('Dragging Element')
      event.dataTransfer.setData('id', event.target.id);
  }
  
  const onDragEnd = (event) => {
      console.log('Dragging Ended');
  }
  
  card.forEach((card) => {
      card.ondragstart = onDragStart;
      card.ondragend = onDragEnd;
  })

Thiết kế website giá rẻ

Danh mục

Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’. on created div element but not existing