Why is my addStar() function not working if i decide to run it again for the second time?

I am into JavaScript and while attempting a project that will be powered by JavaScript I got stuck.

This project is supposed to work like a contact Application that works on a mobile phone with capabilities to add a contact, add the contact to favourite, edit the contact, search, change the theme of the application and delete the contact.

I have reached the point where you can add a contact but when i created the functionality to add the contact to favourite- If i add a contact to the favArray and remove it from the favArray and I change my mind and I try to add it back to the favArray it will not work(this i do by clicking the star button on the page that appears when you click the created contact) . I have tried debugging this but it just seems to me that i have been stuck.

I am unable to add a saved contact to the favArrayagain after i have added it to the favArray and removed it from the favArray- Humbly, from my point of view, I think the problem is coming from the addStar() function.

// META CAPABILITIES TO ADD TO FAVOURITES; EDIT THE CONTACT; AND DELETE THE CONTACT

const star = document.querySelector('.star');
star.innerHTML = '<i class="fa-sharp fa-regular fa-star"></i>';
// const edit = document.querySelector('.edit');
// const removeCon = document.querySelector('.delete');
    
function addStar(){
    starClicked = true;
    if (star.innerHTML === '<i class="fa-sharp fa-regular fa-star"></i>') {
        favArray.push(currentContact);
        starClicked = false;
        star.innerHTML = '<i class="fa-solid fa-star"></i>';
    } else  if (favArray.includes(currentContact) && star.innerHTML === '<i class="fa-solid fa-star"></i>') {
        const index = favArray.indexOf(currentContact);
        favArray.splice(index, 1);
        star.innerHTML = '<i class="fa-regular fa-star"></i>';
    }
}      
star.addEventListener('click', addStar);

I expected my console to give me a particular error so I checked the console but to my dismay, there was no error.

I tried building the addStar() function from scratch but it did not work. After doing this i expected that whenever i click the star on the description page it should work but it was adding the contact to the favArray and if i click the star it will remove it from favArray and after i have removed it, if i decide to add it back to the favArray by clicking the star it will not work.

And as suggested by Members of this great community I also tried putting the addStar() function and the doc() function outside the loop that loops through the entire contactArray.
Also I tried adding breakpoints and checking if it enters the correct branch then I realised that after adding it to the favArray for the first time and I remove it from the favArray and i decide not to close the description page and still change my mind and try to add it back to the favArray-** the addStar() function will not run until i close the description page.**
I have also tried asking ChatGpt about it but it gave me a code that introduced more bugs and I am a person that likes implementing what i understand.

• The code on github
• The actual page
• codepen.io (you will not be able to see the addContact page)

Within the function updateContacts you have a loop that goes through all the contacts:

function updateContactList() {
...
for (let i = 0; i < contactArray.length; i++) {

Later in the code, within the same loop, you use this i within the addStar function to get the contact with a specific index:

function addStar() {
...
const index = favArray.indexOf(contactArray[i]);
...
}

After that, you add a click handler for the star icon:

star.addEventListener('click', addStar);

Now let's imagine how this work.
In every iteration of the loop, you kind of create a new instance of addStar with a specific i and attach it to the same single star icon.

The result is that when you click the star icon, all addStar functions for all contacts will be executed.

You can easily test this by adding console.log('addStar', i); as a very first line within the addStar() function, create 3 contacts, open any of them, and star it. Open the console and check what you see.

Now let's think about how to fix this problem.

I would recommend you to read a bit about Model-View-Controller concept to get an idea of model (aka state) and view (its visual re-presentation). In your code, everything is mixed all together, and it makes it hard to manage a model and a view in a structured way. Ideally, you should be able to completely separate the code that modifies HTML from the code that manages the list of contacts as an array of objects (your model).

What you need to do now with the current approach.

You need to move the addStar and viewContact (called doc) function out of the loop. You don't need to make a copy of these functions for each contact. For these functions to work, you need to know the currentContact the user clicked. In the loop itself, you only create contacts and attach a click handler. That click handler should set currentContact to the contact clicked and call viewContact. Within viewContact user will be able to click the star icon, and addStar will use the currentContact global variable to add or remove its value from favorites.

Please let me know if this helps.