CODEWITHSUNDEEP
javascripthtmlpaginationbackground-color
Mary
Mary

Reputation: 71

Changing color of active page (pagination)

I'm wondering how to change the color of an active page? This function isn't working and I don't really want to make it as input type="button"... as it looks way worse. What am I missing here?

<form1>
        <script>
                function btnColor(btn, color) {
                        var property = document.getElementById(btn)
                        property.style.backgroundColor = color;
                        }
        </script>
        <div class="pagination">
                <a id="pageOne" onclick="btnColor('pageOne','#ffcce9');">1</a>
                <a id="pageTwo" onclick="btnColor('pageTwo','#ffcce9');">2</a>
                <a id="pageThree" onclick="btnColor('pageThree','#ffcce9');">3</a>
        </div>
</form1>

Upvotes: 1

Views: 3677

Answers (4)

Garrett Kadillak
Garrett Kadillak

Reputation: 1074

The whole point is to change the background color of the page, right? This should do the trick. As mentioned previously, onclick is not great practice.

<body>
  <button data-color="black">Page 1</button>
  <button data-color="blue">Page 2</button>

  <script>
    var buttons = document.querySelectorAll('button');

    buttons.forEach(function (button) {
        button.addEventListener('click', function () {
            var color = button.dataset.color;
            document.body.style.background = color;
        });
    });
  </script>
</body>

http://jsbin.com/guxoyok/edit?html,js,console,output

Upvotes: 0

Constantin Guidon
Constantin Guidon

Reputation: 1892

let's try this ( on click event in html is not a good practice ) 

<form1>

  <div class="pagination">
    <a id="pageOne">1</a>
    <a id="pageTwo">2</a>
    <a id="pageThree">3</a>
  </div>
</form1>
<script>
  links = document.querySelectorAll("a")
  links.forEach(function (item) {
    item.addEventListener('click', function () {
      //reset the color of other links
      links.forEach(function (item) {
        item.style.backgroundColor = '#fff'
      })
      // apply the style to the link
      this.style.backgroundColor = '#ffcce9'
    });
  })

</script>

Upvotes: 3

repzero
repzero

Reputation: 8412

You can loop through all your page tabs and determine if they are active. If not, remove the css class from the inactive ones and add a css class on the active one

Example below

.color{
background:#ffcce9
}
.pages:hover{
cursor:pointer
}
<form1>
  <script>
    function btnColor(btn, color) {
      property = document.getElementById(btn);
      property.classList.add("color");
      var all_pages = document.getElementsByClassName("pages");
      for (x = 0; x < all_pages.length; ++x) {
        if (all_pages[x].classList.contains("color") && all_pages[x] != property) {
          all_pages[x].classList.remove("color");
        } //end if
      }

    }
  </script>
  <div class="pagination">
    <a id="pageOne" class="pages" onclick="btnColor('pageOne','#ffcce9');">1</a>
    <a id="pageTwo" class="pages" onclick="btnColor('pageTwo','#ffcce9');">2</a>
    <a id="pageThree" class="pages" onclick="btnColor('pageThree','#ffcce9');">3</a>
  </div>
</form1>

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138267

<form1>
    <script>
            window.addEventListener("onload",function(){
               console.log("loaded");
               ["pageOne","pageTwo","pageThree"].forEach(function(id){
                    console.log(id);
                   document.getElementById(id).addEventListener("click",function(){
                        console.log(this);
                        this.style.backgroundColor=,'#ffcce9';
                   });
                });
             });
    </script>
    <div class="pagination">
            <a id="pageOne" >1</a>
            <a id="pageTwo" >2</a>
            <a id="pageThree" >3</a>
    </div>
</form1>

Simply use the js onclick to listen to all clicks...

Upvotes: 0

Related Questions