मैं जावास्क्रिप्ट के साथ एक बोर्ड बनाने की कोशिश कर रहा हूँ।

ऐसा करते समय, मुझे li को ul में जोड़ने में परेशानी का सामना करना पड़ा।

कई ul होंगे और उपयोगकर्ता li को ul में जोड़ सकता है, जिस पर उसने 'add_card' बटन क्लिक किया था। मैंने कोशिश की, लेकिन इसे केवल पहले ul में जोड़ा गया है।

यहाँ मैंने कोशिश की है।

एचटीएमएल

<main>
<div id="myTitle" class="bigTitle">
  <input type="text" id="myInput" placeholder="TItle...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<div id="myBoard">
  <div id="myUL-con">

    <h3 contenteditable="true">Things to do</h3>

    <span class="close close_list"></span>

    <ul id="myUL" runat="server">
      <li id="node" draggable="true" ondragstart="drag(event)">
        <h4 id="sm_title" contenteditable="true">Do the meditation</h4>
        <span contenteditable="true">- before going to sleep</span>
      </li>          
    </ul>

    <span id="add_card" onclick="addCard()" type="button"></span>

  </div>      
</div>

सीएसएस

/* When clicked on, add a background color and strikeout text */
ul li.checked {
  background: rgba(106, 140, 168, 0.82);
  color: #f4f5f7;
  text-decoration: line-through
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border: solid #f4f5f7;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px
}

जावास्क्रिप्ट

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item or card item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var card = document.createElement("div");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue),
    h3 = document.createElement("h3");
  card.appendChild(h3);
  h3.appendChild(t);



 if (inputValue === '') {
    alert("You must write something!");
  } else {
    //Create new LIST and its CARD as well
    var myBoard = document.getElementById("myBoard");
    var newUl = myBoard.appendChild(card);
    var myUl = document.createElement("ul");
    var list = document.createElement("li");
    var h4 = document.createElement("p");
    var span = document.createElement("span");
    var close = document.createElement("span");
    var add_card = document.createElement("span");

    newUl.setAttribute("id", "myUL-con");
    newUl.appendChild(myUl);    

    newUl.appendChild(close);
    myUl.appendChild(list);
    myUl.setAttribute("id", "myUL");

    close.className = "close";

    list.appendChild(h4);
    h4.setAttribute("id", "sm_title");
    h4.setAttribute("contenteditable", "true");
    h4.textContent = "Title..";

    list.appendChild(span);
    span.setAttribute("contenteditable", "true");
    span.textContent = "- Note here..";

    var myNodelist = document.getElementsByTagName("LI");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);
    }

newUl.appendChild(add_card);
add_card.setAttribute("id", "add_card");
add_card.setAttribute("onclick", "addCard()");

//Reset the input value
var resetButton = document.getElementById("myInput");
if(resetButton){
        resetButton.value= "";
    }

  }

  // Again, create a "x" button to delete
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  card.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }


}

// Creat new Card
function addCard() {
  var ul = document.getElementById("myUL");
  var li = document.createElement("li");
  var add = document.getElementsByClassName("add");

  ul.appendChild(li);
  li.setAttribute("id", "node");
  li.className = "add";

  for (i = 0; i < add.length; i++) {
    add[i].onclick = function () {
      var div = this.parentElement;
      div.appendChild(li);
      console.log(div);
    }
  }
}

साथ ही, कृपया मुझे बताएं कि सभी जोड़े गए li के लिए मुझे कोड कहां लिखना चाहिए, सभी फ़ंक्शन मौजूद हैं li क्योंकि जिन कार्यों को काम करना चाहिए, वे भी काम नहीं करते हैं।

0
Uheny 17 मार्च 2020, 08:59
Add_card.onclick = AddCard; घटना (ओं) को जोड़ने का उचित तरीका है। और आप शायद नए तत्वों की सभी घटनाओं को सेट नहीं करते हैं।
 – 
Tom
17 मार्च 2020, 12:23

1 उत्तर

सबसे बढ़िया उत्तर

जिस तरह से आपका कोड इस तरह व्यवहार करता है, वह यह है कि आप प्रत्येक नए li तत्व को 'myUL' में जोड़ते हैं जो पहले कार्ड का प्रतिनिधित्व करता है।

आपको क्या करना चाहिए प्रत्येक नए तत्व को एक अद्वितीय आईडी देना।

जिस तरह से मैंने किया वह नया तत्व जोड़ते समय है:

      let ulIdx = 1;
      ulIdx++;
      let myUL_id = "myUL"+ulIdx.toString();
      myUl.setAttribute("id", myUL_id);

newUl.appendChild(add_card);
add_card.id = "add_card"+ulIdx.toString();
add_card.innerText = "Add li element";
add_card.setAttribute("onclick", "addCard(this)");

फिर फ़ंक्शन में addCard(el){}, नीचे की पंक्तियों को शामिल करें;

  var add_LI_element = el.getAttribute("id");
  var elIndex = add_LI_element.charAt(add_LI_element.length -1);
  var ul = document.getElementById("myUL"+elIndex);

मेरा कामकाजी उदाहरण stackblitz

0
Siti Aisah 19 मार्च 2020, 03:57
आपके उत्तर के लिए धन्यवाद। आपने जो कहा उसका तार्किक बिंदु मुझे मिल गया, लेकिन मैं अभी भी खोया हुआ हूं। क्या मुझे यहां एक नया कार्य करने का प्रयास करना चाहिए: add_card.setAttribute("onclick", "addCard()")? तो इसका मतलब है कि ऐडकार्ड की जगह एक और फंक्शन बनाएं।
 – 
Uheny
18 मार्च 2020, 11:49
क्षमा करें .. मेरा बुरा, मैं कुछ पंक्तियों को शामिल करना भूल गया, उत्तर अपडेट किया गया
 – 
Siti Aisah
19 मार्च 2020, 03:54