title: why My slider Bullet function is undefined?
body: <p>Hello guys I'm having problem</p>
  
  <ul>
  <li>when I click on a certain bullet an Error comes up in the console
  function</li>
  </ul>
  
  <p>Uncaught ReferenceError: changeimage is not defined</p>
  
  <ul>
  <li><p>I'm calling the function in php not just in js.</p>
  
  <p>echo 'Bullet </p></li>
  <li><p>See the galleryNavigationBullets div to see the name function</p>
  
  <p>
              
                  
                      ';
                          }
                      ?>
                  </p>
  
  <pre><code>        &lt;div class="galleryPreviewArrows"&gt;
              &lt;a href="#" class="previousSlideArrow"&gt;&amp;lt;&lt;/a&gt;
              &lt;a href="#" class="nextSlideArrow"&gt;&amp;gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="galleryNavigationBullets"&gt;
              &lt;?php
                  for ($b = 1; $b &lt;= $imagesTotal; $b++) {
                      echo '&lt;a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"&gt;&lt;span&gt;Bullet&lt;/span&gt;&lt;/a&gt; ';
                  }
              ?&gt;
          &lt;/div&gt;
  
          &lt;div class="galleryDescription"&gt;
              &lt;?php
                  for ($x = 1; $x &lt;= $imagesTotal; $x++) {
                      echo '&lt;div class="description' . $x . '"&gt;' . $description[$x] . '&lt;/div&gt;';
                  }
              ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      // init variables
      var imagesTotal = &lt;?php echo $imagesTotal; ?&gt;;
      var currentImage = 1;
      var thumbsTotalWidth = 0;
      &lt;/script&gt;
  </code></pre></li>
  </ul>
  
  <p>the jquery code : plz see the bullet code !</p>
  
  <pre><code> $(document).ready(function(){
  $('a.galleryBullet' + currentImage).addClass("active");
  $('div.description' + currentImage).addClass("visible");
  
  // PREVIOUS ARROW CODE
  $('a.previousSlideArrow').click(function() {
  $('img.previewImage' + currentImage).hide();
  $('a.galleryBullet' + currentImage).removeClass("active");
  $('a.thumbnailsimage' + currentImage).removeClass("active");
  $('div.description' + currentImage).removeClass("visible");
  
  currentImage--;
  
  if (currentImage == 0) {
      currentImage = imagesTotal;
  }
  
  $('a.galleryBullet' + currentImage).addClass("active");
  $('a.thumbnailsimage' + currentImage).addClass("active");
  $('img.previewImage' + currentImage).show();
  $('div.description' + currentImage).addClass("visible");
  
  return false;
  });
  // ===================
  
  
  // NEXT ARROW CODE
  $('a.nextSlideArrow').click(function() {
  $('img.previewImage' + currentImage).hide();
  $('a.galleryBullet' + currentImage).removeClass("active");
  $('a.thumbnailsimage' + currentImage).removeClass("active");
  $('div.description' + currentImage).removeClass("visible");
  
  currentImage++;
  
  if (currentImage == imagesTotal + 1) {
      currentImage = 1;
  }
  
  $('a.galleryBullet' + currentImage).addClass("active");
  $('a.thumbnailsimage' + currentImage).addClass("active");
  $('img.previewImage' + currentImage).show();
  $('div.description' + currentImage).addClass("visible");
  
  return false;
  });
  // ===================
  
  
  // BULLETS CODE
  function changeimage(imageNumber) {
  $('img.previewImage' + currentImage).hide();
  currentImage = imageNumber;
  $('img.previewImage' + imageNumber).show();
  
  $('.galleryNavigationBullets a').removeClass("active");
  $('.galleryDescription &gt; div').removeClass("visible");
  
  $('a.galleryBullet' + imageNumber).addClass("active");
  $('a.thumbnailsimage' + currentImage).addClass("active");
  $('div.description' + currentImage).addClass("visible");
  }
  // ===================
  
  
  // AUTOMATIC CHANGE SLIDES
  function autoChangeSlides() {
  $('img.previewImage' + currentImage).hide();
  $('a.galleryBullet' + currentImage).removeClass("active");
  $('a.thumbnailsimage' + currentImage).removeClass("active");
  $('div.description' + currentImage).removeClass("visible");
  
  currentImage++;
  
  if (currentImage == imagesTotal + 1) {
      currentImage = 1;
  }
  
  $('a.galleryBullet' + currentImage).addClass("active");
  $('a.thumbnailsimage' + currentImage).addClass("active");
  $('img.previewImage' + currentImage).show();
  $('div.description' + currentImage).addClass("visible");
  }
  
  var slideTimer = setInterval(function() {autoChangeSlides(); }, 3000);
  
  });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>/* General Ruels */
  
      .container {padding:0 25px;}
  
      * , *:before, *:after {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin:0;
          padding:0;
      }
  
      ul {list-style: none;}
      nav ul li {color:white;}
  
      .fb {display: flex;}
  
      /* Header Styles */
  
      header {background: #232323;}
  
      .hdr-logo {position:relative; }
  
      .hdr-logo a {background-image:url("../images/logo.png"); background-repeat: no-repeat; height:40px; width:153px; display: inline-block;}
  
      .container.fb.hdr-ex { justify-content: space-between; padding: 17px 25px; }
  
      .hdr-ex nav ul.fb.ul-ex { padding-top: 13px; }
  
      .ul-ex li { padding: 0 5px; font-weight: 500; font-size: 14px; cursor:pointer; }
  
      .sch-con {padding:8px 0;}
  
      .sch-con #sch {padding:3px 8px; background-color: rgb(68, 68, 68); border:0; width:100%;}
  
      .btn-con {padding:8px 0;}
  
      .btn-con #btn {color:white; background-color: rgb(3, 151, 214); border:0; padding:3px 8px;}
  
      .body1 { background-color:#1A1A1A; }
  
      .news {color:#fff;}
  
      .news h2 {font-size: 14px;}
  
  
  
  
      /* Media Queries stuff  */
  
      @media screen and (max-width: 1199px) {
  
      }
  
      @media (min-width:991px) and (max-width:1899px) {
          .sch-con {width:153px;}
      }
  
  
      /* Slider Sites */
  
      .galleryContainer a {
          transition: all 150ms linear;
          -webkit-transition: all 150ms linear;
          -moz-transition: all 150ms linear;
      }
      .galleryContainer {
          margin: 40px auto;
          width: 900px;
      }
      .galleryPreviewContainer {
          position: relative;
      }
      .galleryPreviewImage img {
          display: none;
          border-radius: 30px;
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          box-shadow: 5px 5px 0 0 #c1c1c1;
          position: relative;
          top: 0;
          left: 0;
      }
      img.previewImage1 {
          display: block;
      }
      .galleryPreviewArrows a {
          font-family: Arial;
          font-size: 30px;
          background: rgba(0,0,0, 0.3);
          width: 70px;
          height: 70px;
          line-height: 70px;
          display: block;
          text-align: center;
          color: #FFF;
          text-decoration: none;
          border-radius: 100px;
          -webkit-border-radius: 100px;
          -moz-border-radius: 100px;
          position: absolute;
          left: 20px;
          top: 50%;
          margin-top: -35px;
      }
      a.nextSlideArrow {
          right: 20px;
          left: auto;
      }
      .galleryPreviewArrows a:hover {
          background: #000;
          margin-top: -40px;
      }
      .galleryNavigationBullets {
          text-align: center;
          margin-top: 20px;
          margin-bottom: 60px;
      }
      .galleryNavigationBullets span {
          display: none;
      }
      .galleryNavigationBullets a {
          width: 20px;
          height: 20px;
          display: inline-block;
          margin-right: 5px;
          background: #ddd;
      }
      .galleryNavigationBullets a:hover,
      .galleryNavigationBullets a.active {
          background: #555;
      }
  
      .galleryDescription &gt; div {
          display: none;
      }
      .galleryDescription &gt; div.visible {
          display: block;
      }
  </code></pre>
  
  <p>thank you so much</p>