CODEWITHSUNDEEP
javascripthtmlcss
RustyDogg
RustyDogg

Reputation: 11

Onclick class change not working

The onchange script that changes the color of the page navigation is only working for the first div. Centennial works, but not Denver.

I copied the script from another source.

  window.onload = function() {
    setStyles();
  };

function setStyles() {
  ids = new Array('header1', 'header2', 'header3');
  for (i = 0; i < ids.length; i++) {
    document.getElementById(ids[i]).className = 'menu_head2';
    document.getElementById(ids[i]).onclick = function() {
      CngClass(this);
    }
  }
}

function CngClass(obj) {
  var currObj;
  for (i = 0; i < ids.length; i++) {
    currObj = document.getElementById(ids[i]);
    if (obj.id == currObj.id) {
      currObj.className = (currObj.className == 'menu_head2') ? 'menu_head2_active' : 'menu_head2';
    } else {
      currObj.className = 'menu_head2';
    }
  }
}
.city {
  float: left;
  margin: 15px;
  padding: 10px;
  width: 270px;
  height: 400px;
  border-bottom: 1px solid black;
}
h2 {
  color: #333333;
  font-size: 30px;
  font-family: Helvetica, sans-serif
}
.menu_head2 {
  color: blue;
  font-size: 18px;
}
.menu_head2_active {
  color: black;
  font-size: 18px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="city">
  <h2>Castle Rock</h2>
    <iframe width="250" height="250" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Castle+Rock&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>
 
</div>

<div class="city">
  <h2> Centennial </h2>

  <iframe width="250" height="250" scrolling="no" frameborder="no" name="Centennial_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Centennial&#39;+and+col1+in+(&#39;Centennial+Collision+Center&#39;%2C+&#39;CARSTAR+Collision&#39;)+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

  <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Centennial+Collision+Center'%2C+'CARSTAR+Collision')+order+by+col1+asc&tmplt=3&cpr=1"
    target="Centennial_search" id="header1" class="menu_head2"> 1</a> -

    <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Service+King+'%2C+'Kuni+Body+Shop+and+Collision')+order+by+col1+asc&tmplt=3&cpr=1" target="Centennial_search"
    id="header2" class="menu_head2"> 2</a>
  </p>
</div>


<div class="city">
  <h2> Denver </h2>

  <iframe width="250" height="250" scrolling="no" frameborder="no" name="Denver_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Denver&#39;+and+col1+%3D+&#39;ReconLinx+Highlands+Ranch&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

  <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+%3D+'ReconLinx+Highlands+Ranch'+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search" id="header1"
    class="menu_head2"> 1</a> -

    <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+in+('A%26W+Auto+Body+Inc'%2C+'BodyWorks+by+MMI')+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search"
    id="header2" class="menu_head2"> 2</a>
  </p>
</div>

Upvotes: 1

Views: 104

Answers (1)

R3tep
R3tep

Reputation: 12864

You use the same id in your tag. An id should be used only one time in your DOM. Otherwise getElementById returns the first element, with the id passed in parameter, it finds in the DOM.

Try to assign a generics attributes on your tags. And use the method document.querySelectorAll

 window.onload = function() {
        setStyles();
      };

    function setStyles() {
      ids = new Array('header1', 'header2', 'header3');
      for (i = 0; i < ids.length; i++) {
        var x = document.querySelectorAll('[data-foo]');
        console.log(x);
        for (i = 0; i < x.length; i++) {
          x[i].className = 'menu_head2';
          x[i].onclick = function() {
            CngClass(this);
          }
        }
      }
    }

    function CngClass(obj) {
      var currObj;
      for (i = 0; i < ids.length; i++) {
        currObj = document.querySelectorAll('[data-foo]');
        for(i = 0; i < currObj.length; i++) {
          if (obj.getAttribute("data-foo") == currObj[i].getAttribute("data-foo")) {
            currObj[i].className = (currObj[i].className == 'menu_head2') ? 'menu_head2_active' : 'menu_head2';
          } else {
            currObj[i].className = 'menu_head2';
          }
        }
      }
    }

    
    .city {
      float: left;
      margin: 15px;
      padding: 10px;
      width: 270px;
      height: 400px;
      border-bottom: 1px solid black;
    }
    h2 {
      color: #333333;
      font-size: 30px;
      font-family: Helvetica, sans-serif
    }
    .menu_head2 {
      color: blue;
      font-size: 18px;
    }
    .menu_head2_active {
      color: black;
      font-size: 18px
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="city">
      <h2>Castle Rock</h2>
        <iframe width="250" height="250" scrolling="no" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Castle+Rock&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>
     
    </div>

    <div class="city">
      <h2> Centennial </h2>

      <iframe width="250" height="250" scrolling="no" frameborder="no" name="Centennial_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Centennial&#39;+and+col1+in+(&#39;Centennial+Collision+Center&#39;%2C+&#39;CARSTAR+Collision&#39;)+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

      <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Centennial+Collision+Center'%2C+'CARSTAR+Collision')+order+by+col1+asc&tmplt=3&cpr=1"
        target="Centennial_search" data-foo="header1" class="menu_head2"> 1</a> -

        <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Centennial'+and+col1+in+('Service+King+'%2C+'Kuni+Body+Shop+and+Collision')+order+by+col1+asc&tmplt=3&cpr=1" target="Centennial_search"
        data-foo="header2" class="menu_head2"> 2</a>
      </p>
    </div>


    <div class="city">
      <h2> Denver </h2>

      <iframe width="250" height="250" scrolling="no" frameborder="no" name="Denver_search" src="https://www.google.com/fusiontables/embedviz?viz=CARD&amp;q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+&#39;Denver&#39;+and+col1+%3D+&#39;ReconLinx+Highlands+Ranch&#39;+order+by+col1+asc&amp;tmplt=3&amp;cpr=1"></iframe>

      <p style="text-align:center"><a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+%3D+'ReconLinx+Highlands+Ranch'+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search" data-foo="header1"
        class="menu_head2"> 1</a> -

        <a href="https://www.google.com/fusiontables/embedviz?viz=CARD&q=select+*+from+13mj31Ol2asfh7ASbiUlFdSIEQZ2X1Dg8v-N1-68-+where+col3+%3D+'Denver'+and+col1+in+('A%26W+Auto+Body+Inc'%2C+'BodyWorks+by+MMI')+order+by+col1+asc&tmplt=3&cpr=1" target="Denver_search"
        data-foo="header2" class="menu_head2"> 2</a>
      </p>
    </div>

Upvotes: 2

Related Questions