The items in the array cannot be identified

Question

The items in the array cannot be identified

    var userInput = prompt('Select a fruit:');
      var fruitList = ["apple", 'grapes', "orange"];

      for(var i=0; i<fruitList.length; i++);
        if(userInput == fruitList[i]){
          alert("Apologies, we are currently out of " + userInput);
        }else{
          var userFruit = document.createElement('li');
          userFruit.textContent = userInput;
          var fruits = document.getElementById('list');
          fruits.appendChild(userFruit);
        }

    <div id="list"></div>

The issue seems to be with the for loop as it is adding the user input to the list without recognizing elements from the array. The list (not included here) has id="list" and contains three elements from the array. Thank you!

  var userInput = prompt('Select a fruit:');
  var fruitList = ["apple", 'grapes', "orange"];

  for(var i=0;i＜fruitList.length; i++);
    if(userInput == fruitList[i]){
      alert("Apologies, we are currently out of " + userInput);
    }else{
      var userFruit = document.createElement('li');
      userFruit.textContent = userInput;
      var fruits = document.getElementById('list');
      fruits.appendChild(userFruit);
    }

javascript arrays for-loop dom appendchild

Answer 1

Answer №1

Make sure to include the curly brackets in your for loop... It may not be necessary, but it definitely makes your code cleaner. Your problem stemmed from a syntax error where you mistakenly placed a semicolon at the end of the for loop which prematurely terminated it.

Instead of -->

for(var i=0; i<fruitList.length; i++);

Use this instead -->

for(var i=0; i<fruitList.length; i++){

or

for(var i=0; i<fruitList.length; i++)

EDIT NOTE: The variables have been moved outside the for loop and assigned the value of innerHTML, or alternatively you could use

textContent</code. Then within the for loop, the newly created <code>li

element is appended to the parent ul.

https://i.sstatic.net/Lsv1O.jpg

const userInput = prompt('Which fruit would you like?');
const fruitList = ["banana", 'strawberries', "mango"];
const fruits = document.getElementById('list');
const userFruit = document.createElement('li')
userFruit.innerHTML = userInput;

for (let i = 0; i < fruitList.length; i++) {
  if (userInput === fruitList[i]) {
    alert("Sorry, we are out of " + userInput);
  } else {
    fruits.append(userFruit);
  }
}

<ul id="list"></ul>

Answer 2

Make sure to include the curly brackets in your for loop... It may not be necessary, but it definitely makes your code cleaner. Your problem stemmed from a syntax error where you mistakenly placed a semicolon at the end of the for loop which prematurely terminated it.

Instead of -->

for(var i=0; i<fruitList.length; i++);

Use this instead -->

for(var i=0; i<fruitList.length; i++){

or

for(var i=0; i<fruitList.length; i++)

EDIT NOTE: The variables have been moved outside the for loop and assigned the value of innerHTML, or alternatively you could use

textContent</code. Then within the for loop, the newly created <code>li

element is appended to the parent ul.

https://i.sstatic.net/Lsv1O.jpg

const userInput = prompt('Which fruit would you like?');
const fruitList = ["banana", 'strawberries', "mango"];
const fruits = document.getElementById('list');
const userFruit = document.createElement('li')
userFruit.innerHTML = userInput;

for (let i = 0; i < fruitList.length; i++) {
  if (userInput === fruitList[i]) {
    alert("Sorry, we are out of " + userInput);
  } else {
    fruits.append(userFruit);
  }
}

<ul id="list"></ul>

Answer 3

Answer №2

Your code has been revised for better clarity.

Does this align with your expectations?

var userInput = prompt('Please select a fruit:');
var fruitList = ["banana", 'strawberries', "mango"];
let newItem = false;
for (let i = 0; i < fruitList.length; i++) {
  if (userInput == fruitList[i]) {
    newItem = false;
    alert("Unfortunately, we are currently out of stock for " + userInput);
  } else {
    newItem = true;
  }
}
if (newItem) {

  let userFruit = document.createElement('li');
  userFruit.innerHTML = userInput
  let fruits = document.getElementById('list');
  fruits.appendChild(userFruit);
}

<ul id="list">

</ul>

Answer 4

Your code has been revised for better clarity.

Does this align with your expectations?

var userInput = prompt('Please select a fruit:');
var fruitList = ["banana", 'strawberries', "mango"];
let newItem = false;
for (let i = 0; i < fruitList.length; i++) {
  if (userInput == fruitList[i]) {
    newItem = false;
    alert("Unfortunately, we are currently out of stock for " + userInput);
  } else {
    newItem = true;
  }
}
if (newItem) {

  let userFruit = document.createElement('li');
  userFruit.innerHTML = userInput
  let fruits = document.getElementById('list');
  fruits.appendChild(userFruit);
}

<ul id="list">

</ul>

Answer 5

Answer №3

When your input is compared to all the fruits in the array, any missing fruit will be added to the list. An alternative is to use the includes method to verify if the element exists in the array.

  var userInput = prompt('Select a fruit:');

  var fruitList = ["apple", 'kiwi', "pear"];

  if(fruitList.includes(userInput)) {
    alert("Sorry, we are currently out of stock for " + userInput);
  }
  else {
    var userFruit = document.createElement('li');
    userFruit.textContent = userInput;
    var fruits = document.getElementById('list');
    fruits.appendChild(userFruit);
  }

 <div id="list"></div>

Answer 6

When your input is compared to all the fruits in the array, any missing fruit will be added to the list. An alternative is to use the includes method to verify if the element exists in the array.

  var userInput = prompt('Select a fruit:');

  var fruitList = ["apple", 'kiwi', "pear"];

  if(fruitList.includes(userInput)) {
    alert("Sorry, we are currently out of stock for " + userInput);
  }
  else {
    var userFruit = document.createElement('li');
    userFruit.textContent = userInput;
    var fruits = document.getElementById('list');
    fruits.appendChild(userFruit);
  }

 <div id="list"></div>

The items in the array cannot be identified

Answer №1

Answer №2

Answer №3

Similar questions

Load/run JavaScript code before sending email blade template

Optimizing the particle rendering speed for HTML5 <canvas> elements

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

What steps can I take to resolve the TypeError in next js where I am unable to set properties of undefined for 'className'?

Inquiries prior to projecting rays

Fetching information from a data object using asyncData in Nuxt

Tips for automatically injecting Models and Services into all Controllers when developing a Node.js application using Express

Upon clicking the button, provide the client with the Cloudinary link

Please rewrite the following sentence: "I am going to the store to buy some groceries."

What causes the findByIDAndUpdate method to return a `null` value in Mongoose 6?

Conceal a specific div element using jQuery hide method based on its unique

Transforming the appearance of an Imagebutton upon clicking with the power of Javascript

Easily adding multiple field data with the same field name into a database can be achieved using Mongoose and Node.js (specifically Express

Conceal YouTube upon opening any model or light box

An offbeat symbol discovered when using conditional rendering

How to use Selenium-Webdriver (Java Script) to wait for an element to vanish

Trigger the function upon successful completion of Stripe Checkout

Setting up language preferences without having to reload the entire page

Refresh the div based on the script's output

Creating a function to determine if at least one checkbox has been selected