CODEWITHSUNDEEP
javascripthtml
LowlyCoder
LowlyCoder

Reputation: 21

Creating a button function with parameter

I'm making a simple note app. Each note has a title, a body and a complete status. I want to create it so that if a note is not completed, it creates a button under the note. Upon clicking the button it should change the boolean value of complete to true and repopulate the list.

The problem I'm experiencing is that if the title has a space in it, I get an error:

Picture of error in console

This only happens when there is a space in the title(clicked on Family time). Does anyone know what the issue is? I've tried to create note.title as a variable then add it in. I've also tried to note.title.toString() with no luck. Here is the function:

function populateList(theList)
{
    let divList = document.querySelector('#ListDiv');
    divList.innerHTML = "";
    theList.forEach(function(note)
    {
        let element = document.createElement('p');
        let titleName = note.title.toLowerCase();
        element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed:${note.completed}`;
        if(note.completed == false)
        {
            element.innerHTML += `<br><button onclick=completeNote("${note.title}")>Complete</button>`;
        }
        divList.appendChild(element);
    });
}

Upvotes: 0

Views: 168

Answers (2)

Ravi Parasaniya
Ravi Parasaniya

Reputation: 146

Here you can use encodeURIComponent & decodeURIComponent like below:

function populateList(theList)
{
    let divList = document.querySelector('#ListDiv');
    divList.innerHTML = "";

    theList.forEach(function(note)
    {
        let element = document.createElement('p');
        let titleName = note.title.toLowerCase();
        element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed:${note.completed}`;
        if(note.completed == false)
        {
            element.innerHTML += "<br><button onclick=completeNote('" + encodeURIComponent(note.title) + "')>Complete</button>";
        }
        divList.appendChild(element);
    });
}

function completeNote(title){
    theList.forEach(x=>{if(x.title == decodeURIComponent(title)){x.completed =true}});
    populateList(theList);
}

Upvotes: 2

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

You should add a note ID to your objects and when you click the button, pass the ID to the function to find the node and set it's status to completed.

After you change the status, re-render the list.

const notes = [
  { id: 1, title: 'Morning', body: 'Get out of bed', completed: true },
  { id: 2, title: 'Day', body: 'Work', completed: false },
  { id: 3, title: 'Evening', body: 'Go to bed', completed: false }
];

populateList(notes);

function completeNote(noteId) {
  notes.find(note => note.id === parseInt(noteId, 10)).completed = true;
  populateList(notes);
}

function populateList(theList) {
  const divList = document.querySelector('#ListDiv');
  divList.innerHTML = "";
  theList.forEach(note => {
    let element = document.createElement('p');
    let titleName = note.title.toLowerCase();
    element.innerHTML = `Title: ${note.title}<br>Body: ${note.body}<br>Completed: ${note.completed}`;
    if (note.completed == false) {
      element.innerHTML += `<br><button onclick=completeNote("${note.id}")>Complete</button>`;
    }
    divList.appendChild(element);
  });
}
<div id="ListDiv"></div>

Upvotes: 0

Related Questions