Issue
I am creating a code to add new fruits to a list of fruits but I needed to check if the fruit already exist before adding the new one. My code is below. I know there are errors because I'm still new to javascript. So I need corrections.
<!DOCTYPE html>
<html>
<head>
<title> Add new fruits </title>
</head>
<body>
<div>
<p>Enter a fruit to add to the list</p>
<input type="text" id="fruit" />
<Button onclick="prependContent()"> Add to List </button>
</div>
<ul id="list">
<li> Mangoes </li>
<li> Bananas </li>
<li> Oranges </li>
</ul>
<script>
function prependContent() {
var fruit = document.getElementById("fruit").value;
var list = document.getElementById("list");
var listItem = list.getElementsByTagName("li");
if (fruit =="") { //validate input
alert("enter a fruit name");
return false;
} else { //check if fruit already exist */
for (let i=0; i<listItem.lenght; i++) {
if (listItem[i]=fruit) {
alert("fruit already exist in the list");
return false;
} else { //add new fruit
var li = document.createElement("li");
var textNode = document.createTextNode(fruit);
li.appendChild(textNode);
list.prepend(li);
};
}
</script>
</body>
Solution
function prependContent() {
var fruit = document.getElementById("fruit").value;
var list = document.getElementById("list");
var listItem = list.getElementsByTagName("li");
if (!fruit) { //validate input
alert("enter a fruit name");
return
}
else { //check if fruit already exist */
for (let i = 0; i < listItem.length; i++) {
//listItem[i] contain element. use it's innerText property instead to access it's content.
// '=' operator is for assigment. use '===' strict equality to check equality instead
if (listItem[i].innerText.toLowerCase() === fruit.toLowerCase()) {
alert("fruit already exist in the list");
return
}
}
//add new fruit
//put its outside else because if u check in each list there will only one item thats is equal. so if fruit exist in list[3] but not list[0], with your code it's will append new child even though the fruit actually exist in list[3]
var li = document.createElement("li");
var textNode = document.createTextNode(fruit);
li.appendChild(textNode);
list.prepend(li);
//u miss some closing bracket
}
}<!DOCTYPE html>
<html>
<head>
<title> Add new fruits </title>
</head>
<body>
<div>
<p>Enter a fruit to add to the list</p>
<input type="text" id="fruit" />
<Button onclick="prependContent()"> Add to List </button>
</div>
<ul id="list">
<li> Mangoes </li>
<li> Bananas </li>
<li> Oranges </li>
</ul>
</body>Answered By - Rumeee Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.