javascript – How do I make this slider change to a custom slider number?-ThrowExceptions

Exception or error:

I have this slider, I want to be able to click the slide number instead of “next” and “previous”, then it go to that slide, currently there’s functions that allow you to change to next/previous (this is not my code):

jQuery(".next").click(ms_go_next);

and

jQuery(".previous").click(function(){

Basically in the code getleads.js I’ve found a function in the code called “ms_go_slide”, I take it this function will take a custom number and change it to that slide:

function ms_go_slide(slide, direction) {

  if (animating) return false;
  animating = true;

  var fs = jQuery('fieldset').filter(':visible');
  next_fs = jQuery('fieldset.section' + slide);

  ms_set_height(next_fs);

  //show the next fieldset

  next_fs.css({
    'left': ((direction == 'ltr') ? '-100%' : '100%'),
    'top': 0
  });
  next_fs.show();

  //hide the current fieldset with style
  current_fs.animate({
    opacity: 0
  }, {
    step: function(now, mx) {

      if (direction == 'ltr') {
        var a = (100 * now).toString() + '%';
        var b = '-' + (100 * (1 - now)).toString() + '%';
        current_fs.css({
          'left': b
        });
        next_fs.css({
          'left': a
        });
      } else {
        var a = '-' + (100 * now).toString() + '%';
        var b = (100 * (1 - now)).toString() + '%';
        current_fs.css({
          'left': b
        });
        next_fs.css({
          'left': a
        });
      }
      opacity = 1 - now;

      next_fs.css({
        'opacity': opacity
      });

    },
    duration: 800,
    complete: function() {

      current_fs.hide();
      current_fs.attr('style', '');
      current_fs = next_fs;
      console.log('setting:214', current_fs);
      current_fs.attr('style', '');
      current_fs.show();

      animating = false;
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="msform" form action="https://loancalc.000webhostapp.com/wp-admin/admin-ajax.php" method="POST">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active" style="width:33.333333333333%"></li>
    <li style="width:33.333333333333%"></li>
    <li style="width:33.333333333333%"></li>
  </ul>
  <!-- fieldsets -->
  <div class="fieldsets">
    <fieldset class="section1">
      <p class="inputfield ">How much money do you need?<br>
        <select class="minimal required" name="loanamount" required>
          <option value="Select...">Select...</option>
          <option value="under $5000">under $5000</option>
          <option value=" under $10000"> under $10000</option>
          <option value=" under $20000"> under $20000</option>
          <option value=" under $50000 "> under $50000 </option>
          <option value="under $100000">under $100000</option>
          <option value=" over $100000"> over $100000</option>
        </select>
      </p>
      <div class="buttons">
        <input type="button" name="next" class="next action-button" value="Next" />
      </div>
      <div class="buttons_working">
        <p class="working_loading"></p>
      </div>
    </fieldset>
    <fieldset class="section2">
      <p class="inputfield ">What's your monthly revenue?<br>
        <select class="minimal required" name="yourincome" required>
          <option value="Select...">Select...</option>
          <option value="under $5000">under $5000</option>
          <option value=" under $10000"> under $10000</option>
          <option value=" under $20000"> under $20000</option>
          <option value=" under $50000 "> under $50000 </option>
          <option value="under $100000">under $100000</option>
          <option value=" over $100000"> over $100000</option>
        </select>
      </p>
      <div class="buttons">
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" /></div>
      <div class="buttons_working">
        <p class="working_loading"></p>
      </div>
    </fieldset>
    <fieldset class="section3">
      <p class="inputfield ">Your name<br>
        <input id="yourname" name="yourname" type="text" class="required" value="" /></p>
      <p class="inputfield ">Email address<br>
        <input id="youremail" name="youremail" type="text" class="required" value="" /></p>
      <p class="inputfield ">Phone number<br>
        <input id="yourphone" type="tel" name="yourphone" value="" placeholder="0123-456789" />
        <script type="text/javascript">
          jQuery(document).ready(function() {
            jQuery("input[name=\"yourphone\"]").mask("0000-000000");
          });
        </script>
      </p>
      <p class="inputfield 
    ">Business name<br>
        <input id="businessname" name="businessname" type="text" value="" /></p>
      <div class="buttons"><input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="submit" id="ms_submit" class="submit action-button" value="Submit" /></div>
      <div class="buttons_working">
        <p class="working_loading"></p>
      </div>
    </fieldset>
    <fieldset class="section_success">
      <h2 class="section_success_title">Success</h2>
      <p class="section_success_blurb">You successfully submitted the form</p>
    </fieldset>
    <fieldset class="section_failure">
      <h2>Oops</h2>
      <p>The form didn't submit</p>
    </fieldset>
    <fieldset class="section_loading">
      <p class="loading"></p>
    </fieldset>
  </div>
</form>

I added this bit of code:

jQuery('input').click(ms_go_slide(this.slide));

But it doesn’t work.

How to solve:

What happens if you try jQuery('input').click(() => { ms_go_slide(this.slide) })?

As soon as you run ms_go_slide, it will execute. With your current code, it will run once right when the program begins and then never again.

Instead, we create a new function inside the .click() handler and that function runs on click. I’m using arrow notation here to create the function because it prevents this from acting all funky.

Leave a Reply

Your email address will not be published. Required fields are marked *