I need help with loops 2

Hi guys, can anybody explain to me why I am not getting the name and number of the values I search in my code? Question below and my code under it:

Loops 2 In this next task, we want you to write a simple program that, given a name, searches an array of objects containing names and phone numbers ( phonebook ) and, if it finds the name, outputs the name and phone number into the paragraph ( para ) and then exits the loop before it has run its course.

You are given three variables to begin with:

  • i — starts off with a value of 0; intended to be used as an iterator.
  • name — contains a name to search for
  • para — contains a reference to a paragraph, which will be used to report the results.
  <body>

    <section class="preview">
<label for="searching names">names: </label><input type="text">
<button>Search</button>

    </section>

  </body>
  <script>
    let name = 'Mustafa';
    let i = 0;
    let para = document.createElement('p');

    let phonebook = [
      { name : 'Chris', number : '1549' },
      { name : 'Li Kang', number : '9634' },
      { name : 'Anne', number : '9065' },
      { name : 'Francesca', number : '3001' },
      { name : 'Mustafa', number : '6888' },
      { name : 'Tina', number : '4312' },
      { name : 'Bert', number : '7780' },
      { name : 'Jada', number : '2282' },
    ]

    // Add your code here
    let nameInput= input.value;
    nameInput=nameInput.toLowerCase();


    for (i=0;i<=phonebook.length;i++) {
      if (nameInput= name.value){
       para.textContent= phonebook.name[i] +  '\'s their number is ' + phonebook.number[i];
      }
      


    }



    // Don't edit the code below here!
    let section = document.querySelector('section');
    section.appendChild(para);
  </script>

what th point of adding that ?

input is not even defined

if you want to get the data from the input then you have to use the queryselector to seelect it

in the if in the for loop you nameInput= name.value the test should be using === not =

and to acess phonebook date you access it like that

phonebook[i].name
the for loop test also should test as long as i < phonebook.length not <=

remember index in array start with 0 and length give the number of item inside the array

hope that help and have a nice day

Still getting nothing and I don’t get why…

const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');
    
    btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < phonebook.length; i++) {

    if (phonebook[i].name.toLowerCase() === searchName) {
      para.textContent = phonebook[i].name + '\'s number is ' + phonebook[i].number + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

could you please put you whole code in codepen or jsfiddle and share the link

i need to see the whole code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Loops: Task 2</title>
    <style>
      p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
    <link rel="stylesheet" href="../styles.css" />
  </head>

  <body>

    <section class="preview">

      <label for="search">Search by contact name: </label>
      <input id="search" type="text">
      <button>Search</button>
      
      <p></p>

    </section>

  </body>
  <script>
    let name = 'Mustafa';
    let i = 0;
    let para = document.createElement('p');

    let phonebook = [
      { name : 'Chris', number : '1549' },
      { name : 'Li Kang', number : '9634' },
      { name : 'Anne', number : '9065' },
      { name : 'Francesca', number : '3001' },
      { name : 'Mustafa', number : '6888' },
      { name : 'Tina', number : '4312' },
      { name : 'Bert', number : '7780' },
      { name : 'Jada', number : '2282' },
    ]

    // Add your code here
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');
    
    btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < phonebook.length; i++) {

    if (phonebook[i].name.toLowerCase() === searchName) {
      para.textContent = phonebook[i].name + '\'s number is ' + phonebook[i].number + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

    // Don't edit the code below here!
    let section = document.querySelector('section');
    section.appendChild(para);
  </script>

</html>

you define para twice

can i ask something

why you insist to put the code here
all i ask to share the link to any website you like jsfiddle does not even require to create account

Holy cow, the code actually works after removing the duplicate :exploding_head:… I’m really starting to feel like the odin project curriculum purposely involves some coding concepts that they haven’t taught yet because I’m supposed to do a DOM manipulation lesson after loops, yet I had to figure out a whole bunch of DOM stuff of the fly in different tasks and assignments…

I guess I just feel comfortable putting the code, especially since i refer back to every inquiry when I get stuck and know that everything is in one place and I won’t have to open up multiple places to get the whole picture… is that a weird thing?