Creating a button function with parameter

Question

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);
    });
}

element.innerHTML += `<br><button onclick='completeNote("${note.title}")'>Complete</button>`; — Miroslav Glamuzina
– Miroslav Glamuzina, Commented Oct 7, 2020 at 16:33
@GrumpyCrouton Ive followed a udemy class. Learned to use `` so i can add javascript variables straight in by using ${} instead of concatinating with + @Mr.Polywhirl i tried to check that, but it wont show anything. Probably because the line is added through javascript. @MiroslavGlamuzina i tried that, sadly still the same issue. il try the answer from Mr Polywhirl below — LowlyCoder
– LowlyCoder, Commented Oct 7, 2020 at 16:44
You can open the debugger and jump to the line of code (aka #21) that was throwing the error. You can also toggle stop on exceptions in the Chrome debugger and it will jump to the line in your script. — Mr. Polywhirl
– Mr. Polywhirl, Commented Oct 7, 2020 at 16:58

Ravi Parasaniya · Accepted Answer · 2020-10-07 17:53:21Z

2

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);
}

edited Oct 7, 2020 at 17:53

answered Oct 7, 2020 at 17:46

Ravi Parasaniya

1444 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr. Polywhirl · Accepted Answer · 2020-10-07 16:40:05Z

0

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>

answered Oct 7, 2020 at 16:40

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

2 Comments

LowlyCoder Over a year ago

Using an id worked like a charm. Thanks! I would still love to know why it didnt work with a space in the title... Just odd that it works when there is no spacing. Hope someone can shed som light on what the problem was to begin with. Thanks again.

Mr. Polywhirl Over a year ago

@LowlyCoder well, your code looks fine the way it was, you were wrapping the title in quotes so I didn't see a problem. But since you didn't show your completeNote function, I didn't know what it was doing with the title. As long as your titles are unique, you should be able to find a note by it's title just as you can with the id as seen above. Try passing the title again and finding the note by title instead of id.

Collectives™ on Stack Overflow

Creating a button function with parameter

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related