मैंने यहां जो एचटीएमएल, सीएसएस और जावास्क्रिप्ट कोड जोड़ा है, वह पूरी तरह से काम करता है लेकिन मुझे एक बहुत ही छोटी समस्या है यानी आदर्श मामले के लिए, अगर मैं आइटम सूची के नाम पर क्लिक करता हूं, तो इसे स्ट्राइक मिलना चाहिए। कोड परिणाम भी मेरी अपेक्षा से मेल खाता है लेकिन केवल डिफ़ॉल्ट सूची नाम के साथ। जैसे ही मैं एक नया सूची आइटम जोड़ता हूं, डिफ़ॉल्ट सूची आइटम को स्ट्राइक नहीं मिल रहा है, हालांकि जब वे एक क्लिक प्राप्त करते हैं। मुझे लगता है कि यह strikeThrought() फ़ंक्शन के विरोध के कारण है (मैं गलत हो सकता हूं)।

document.querySelector("button").addEventListener("click", function() {
  if (document.querySelector("input").value.length > 0) {
    input();
  }
})


document.querySelector("input").addEventListener("keypress", function(event) {
  if (document.querySelector("input").value.length > 0 && event.keyCode === 13) {
    input();
  }
})


deleteList();
strikeThrought();


function input() {
  var input = " " + document.querySelector("input").value;
  var li = document.querySelector("ul").appendChild(document.createElement("li"));
  var button = li.appendChild(document.createElement("button"));
  button.innerHTML = "Delete";
  var span = li.appendChild(document.createElement("span"));
  span.innerHTML = input;
  document.querySelector("input").value = "";

  deleteList();
  strikeThrought();
}


function deleteList() {
  for (var i = 0; i < document.querySelectorAll("li button").length; i++) {
    document.querySelectorAll("li button")[i].addEventListener("click", function() {
      for (var j = 0; j < document.querySelectorAll("li").length; j++) {
        this.parentNode.remove()
      }
    })
  }
}


function strikeThrought() {
  for (var i = 0; i < document.querySelectorAll("span").length; i++) {
    document.querySelectorAll("span")[i].addEventListener("click", function() {
      this.classList.toggle("done");
    })
  }
}
li{
  padding: 3px;
}
p{
  margin: 0;
}
.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow:
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}
<!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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Shopping List</h1>
  <p>Get it done today</p>
  <input type="text" placeholder="Type to enter">
  <button type="button">Enter</button>
  <ul>
    <li class="li0"><button class="toggle-button">Delete</button>  <span>Notebook</span></li>
    <li class="li1"><button class="toggle-button">Delete</button>  <span>Jello</span></li>
    <li class="li2"><button class="toggle-button">Delete</button>  <span>Rice</span></li>
    <li class="li3"><button class="toggle-button">Delete</button>  <span>Spinach</span></li>
    <li class="li4"><button class="toggle-button">Delete</button>  <span>Birthday Cake</span></li>
    <li class="li5"><button class="toggle-button">Delete</button>  <span>Candles</span></li>
  </ul>
  <script src="index.js" charset="utf-8"></script>
</body>
</html>
0
Sandheep Kumar Patro 28 जिंदा 2021, 15:50
आपका कोड काम करता है, लेकिन पेज लोड होने के बाद आप दो बार स्ट्राइकट्रॉ () विधि के लिए इवेंटलिस्टर असाइन करते हैं और विधि को दो बार निष्पादित किया जाएगा। परीक्षण के लिए अलर्ट () जोड़ें और आप इसे देखेंगे।
 – 
Reporter
28 जिंदा 2021, 16:11

1 उत्तर

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

आपको क्लिकों को एक उच्च तत्व (document नीचे मेरे उदाहरण में) को सौंपना चाहिए और हर बार बदलाव किए जाने पर ईवेंट हैंडलर जोड़ने का प्रयास नहीं करना चाहिए।

const inputButton = document.querySelector("button");
const inputField = document.querySelector("input")

inputButton.addEventListener("click", function() {
  if (inputField.value.length > 0) {
    input();
  }
})


inputField.addEventListener("keypress", function(event) {
  if (inputField.value.length > 0 && event.keyCode === 13) {
    input();
  }
})

document.addEventListener("click", function(event) {
  if(event.target.nodeName == "SPAN")
    event.target.classList.toggle("done");
  else if(event.target.nodeName == "BUTTON" && event.target.classList.contains("toggle-button")) {
    event.target.parentElement.remove();
  }
})



function input() {
  var input = " " + document.querySelector("input").value;
  var li = document.querySelector("ul").appendChild(document.createElement("li"));
  var button = li.appendChild(document.createElement("button"));
  button.innerHTML = "Delete";
  button.classList.add("toggle-button");
  var span = li.appendChild(document.createElement("span"));
  span.innerHTML = input;
  document.querySelector("input").value = "";
}
li{
  padding: 3px;
}
p{
  margin: 0;
}
.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow:
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}
<!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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Shopping List</h1>
  <p>Get it done today</p>
  <input type="text" placeholder="Type to enter">
  <button type="button">Enter</button>
  <ul>
    <li class="li0"><button class="toggle-button">Delete</button>  <span>Notebook</span></li>
    <li class="li1"><button class="toggle-button">Delete</button>  <span>Jello</span></li>
    <li class="li2"><button class="toggle-button">Delete</button>  <span>Rice</span></li>
    <li class="li3"><button class="toggle-button">Delete</button>  <span>Spinach</span></li>
    <li class="li4"><button class="toggle-button">Delete</button>  <span>Birthday Cake</span></li>
    <li class="li5"><button class="toggle-button">Delete</button>  <span>Candles</span></li>
  </ul>
  <script src="index.js" charset="utf-8"></script>
</body>
</html>
0
Jamiec 30 जिंदा 2021, 17:14
क्षमा करें, लेकिन आपके जेएस कोड में एक बग है। '''हटाएं''' बटन पर क्लिक करने पर नई सम्मिलित सूची आइटम हटाया नहीं जा रहा है
 – 
Sandheep Kumar Patro
30 जिंदा 2021, 09:53
आपका मूल कोड जो नए तत्व जोड़ता है toggle-button क्लास को डिलीट बटन में नहीं जोड़ रहा है, अगर ऐसा होता है, तो यह काम करेगा। मैं फिक्स के साथ जवाब अपडेट कर दूंगा।
 – 
Jamiec
30 जिंदा 2021, 17:14