Making a button disappear when I'm in page 1 javascript

Question

I'm new to JavaScript and I still don't know much about how it works. I have been trying to make a button disappear when its in page 1, but appear if I'm in page 2 or more. I tried to add [document.getElementById("pagination") = "";] but it didn't work.

function previous() {
  if (page == 1)
    document.getElementById("pagination") = "";
  else {
    page = page - 1;
    search();
  }
}

<div id="pagination">
  <ul class="pagination paginationedit justify-content-center">
    <li class="page-item"><a class="page-link paginationbtnedit" href="#" id="previous">Previous</a></li>
    <li class="page-item"><a class="page-link paginationbtnedit" href="#" id="next">Next</a></li>
  </ul>
</div>

Answer 1

There are several things that can be learned here:

1. Elements are "got" (get) from the DOM, which is why you see document before anything else.

2. To get elements from the DOM, there are several methods.

document.getElementsByTagName(); -> returns a list of all elements with that tag
document.getElementsByClassName(); -> returns a list of all elements with that class
document.getElementById(); -> returns a DOM element with that Id

to name a few methods.

3. You must have an event listener attached to an element to make it do something.

What good are ears (lets say to listen to your parents) if you can't hear their commands? Event listeners are the ears for DOM objects.

Here are a few:

onerror;
onload;
onclick;
onmouseover;
onkeyup;

4. CSS (cascading style sheets) is how the DOM is styled. You can change the way an element looks with CSS in various ways - JS, external style sheets, internal style sheets, etc.

5. Since DOM's are objects that hold styles, their styles can be referenced using the style attribute. DOMObject.style; will return all the styles applied to that object.

6. Use other attributes associated with style to change how the DOM looks and interacts with and to users.

For instance, DOMObject.style.display = "none";.

Variations of css styles can be found in javascript, for instance:

CSS to Javascript
border -> style.border
border-radius -> style.borderRadius
font-family -> style.fontFamily

7. There are a few exceptions, but for the most part, you set attributes with the = operator, and get them without the use of the =.

8. Putting it all together and we end up with:

document.getElementsByTagName('div')[0].style.display = "none";

9. As far as I know, it seems that there is a global variable called location and is recognized by most - if not all - modern browsers. It stores the URL in the address bar as an object, and it has a toString() method. Couple that with the fact that you can store variables (mainly used for queries and get methods on the back-end of a server) in the URL (www.mysite.com?username=someone), you can easily switch between "pages". If you don't want to rename your html files to something boring (like 1.html, 2.html, etc.), you can use array methods to help determine which page a user should be on, then hide the appropriate buttons.

pagination = document.getElementById("containerUl");
loc = new String(location.toString());
page = loc.split("page=")[1];
if (!!page)
{
  if(page.split("&").length > 0)
  {
    page = parseInt(page.split("&")[0]);
  }
}
else
{
  page = 1;
}

pageCount = 10;

pagination.innerHTML = '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=previous" id="previous" onclick="previous();">Previous</a></li>';

for (var i = 0; i < pageCount; i++)
{
  pageNum = '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=' + (i + 1) + '" id="previous">' + (i + 1) + '</a></li></ul>';

  pagination.innerHTML = pagination.innerHTML + pageNum;
}

pagination.innerHTML += '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=next" id="next">Next</a></li>';

//hide the proper element...
document.getElementsByTagName("li")[page].style.display = "none";

function disappear(e)
{
   e.target.style.display = "none";
}

<div class="disappear" onclick="disappear(event)">
Something to make disappear - click me.
</div>

<br>    Note: the following below has no use, because the OP didn't have "search()" defined nor "page".

<div id="pagination">
  <ul id="containerUl" class="pagination paginationedit justify-content-center">
  </ul>
</div>

For ease of copy and paste.

HTML file:

<html>
<head>
<script>

window.onload = function() 
{
    pagination = document.getElementById("containerUl");
    loc = new String(location.toString());
    page = loc.split("page=")[1];
    if (!!page)
    {
      if(page.split("&").length > 0)
      {
        page = parseInt(page.split("&")[0]);
      }
    }
    else
    {
      page = 1;
    }

    pageCount = 10;

    pagination.innerHTML = '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=" id="previous" onclick="event.preventDefault(); pNn(event);">Previous</a></li>';

    for (var i = 0; i < pageCount; i++)
    {
      pageNum = '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=' + (i + 1) + '" id="previous">' + (i + 1) + '</a></li></ul>';

      pagination.innerHTML = pagination.innerHTML + pageNum;
    }

    pagination.innerHTML += '<li class="page-item"><a class="page-link paginationbtnedit" href="?page=" onclick="event.preventDefault(); pNn(event);" id="next">Next</a></li>';

    //hide the proper element...
    document.getElementsByTagName("li")[page].style.display = "none";
}

function pNn(e)
{
    id = e.target.id;
    nextpage = page;
    if (id == "next")
    {
        if (page + 1 < pageCount)
        {
            nextpage++;
        }
        else
        {
            nextpage = pageCount;
        }
    }
    else
    {
        if (page - 1 > 1)
        {
            nextpage--;
        }
        else
        {
            nextpage = 1;
        }
    }

    loc = new String(location.toString());
    newhref = loc.split("page=" + page);

    location = newhref[0] + "page=" + nextpage + newhref[1];
}

function disappear(e)
{
   e.target.style.display = "none";
}

</script>
</head>
<body>
<div class="disappear" onclick="disappear(event)">
Something to make disappear - click me.
</div>

<br>    Note: the following below has no use, because the OP didn't have "search()" defined nor "page".

<div id="pagination">
  <ul id="containerUl" class="pagination paginationedit justify-content-center">
  </ul>
</div>
</body>
</html>

Answer 2

in javascript there are different way to change the attributes of an element (do not know which is the best sorry) :

document.getElementById("pagination").hidden = true;
document.getElementById("pagination").style.visibility = "hidden";
document.getElementById("pagination").style.display = "none";