Question

I am a beginner in JavaScript but I wrote two functions that is meant to keep track of people who have joined a certain club. The JavaScript function is supposed to reload the page continuously to show current membership and especially if a member has been removed from the club.

The two functions I wrote are:

function show_remove()
{
var r=confirm("Press OK to remove or CANCEL to undo.");
if (r==true)
  {
  alert("Removed");
  }
else
  {
  alert("Member still part of club");
  }
}

And

function members()
    {
        var i;
        for (i=0; i<mems.length; i++)
        {
            if (mems[i].isMemberofClub)
            {
                var link = '<a href=' + mems[i].l + '>' + mems[i].n + '</a>';
                document.write(link)
            }
        }
    }

Ideally, these two functions should be linked in some way so that when the manager clicks on the button to remove someone, isMemberofClub becomes false and the person is removed from the list of members. The page then shows the updated list. However, I tried several combinations but the page fails to update the list no matter what I try. Thanks in advance.

Answer 1

In the HTML of your page you should create a DIV with an id of members like this

<div id='members'></div>

Then change your javascript function so that it changes the contents of that div instead of using document.write. I also set it to empty before starting so it is all refreshed.

function members()
{
    var i;
    document.getElementById("members").innerHTML = "";
    for (i=0; i<mems.length; i++)
    {
        if (members[i].isMemberofClub)
        {
            var link = '<a href=' + mems[i].l + '>' + mems[i].n + '</a>';
            document.getElementById("members").innerHTML += link + '<br />'; 
        }
    }
}

In your function which removes members, when it removes them you should call your members() function to refresh the contents of the DIV.