[Resolved] - Help with Javascript Spinner

Klown · Post by **Klown** » Sun Mar 03, 2013 8:58 pm

Hi Guys,

I'm very new to javascript and am trying to make a spinner which increments a text input by + or - 1 based on what button is pressed.
I got this working if you change the text input id to a number, but when you use text, it will not call the function onmousedown.

I have tried changing ship1 to 'ship1' and "ship1", any help would be very much appreciated.

Dustin

Code: Select all

<html>
<head>
<script language="javascript">

function addShip( InputId ){
  var amt = document.getElementById( InputId ).value;
  document.getElementById( InputId ).value++;
     if(amt >= 100)
     {
        document.getElementById( InputId ).value = 100;
     }
  }

function subShip( InputId ){
  var amt = document.getElementById( InputId ).value;
  document.getElementById( InputId ).value--;
     if(amt <= 0)
     {
        document.getElementById( InputId ).value = 0;
     }
  }

</script>
</head>
<body onmouseup="if(window.on)clearInterval(on);">
<form>
   <input type="text" id="ship1" value="0">
   <input type="button" value=" /\ " onmousedown="on=setInterval('addShip(ship1)',1);" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
   <input type="button" value=" \/ " onmousedown="on=setInterval('subShip(ship1)',1);" style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
</form>
</body>
</html>

Ark · Post by **Ark** » Mon Mar 04, 2013 5:34 am

Hi, if i'm not wrong what happens here is that inside

Code: Select all

onmousedown="on=setInterval('addShip(ship1)',1);" ...

ship1 is not being parse like a string ('ship1') but as a variable instead, and since ship1 is not defined the function wont run. So you'll have to 'escape the string' like this:

Code: Select all

onmousedown="on=setInterval('addShip( \'ship1\' )',1);"

hope it helps

Renavoid · Post by **Renavoid** » Mon Mar 04, 2013 3:33 pm

At a glance, Ark is quite correct.

Another approach would be to use what is called unobtrusive javascript (well, truly unobtrusive would suggest removing the javacsript's definitions entirely from the page and having a linked external file, but that's up to you). Instead of declaring onmousedown in the html, you wait for the DOM to load and then attach the event to the buttons. Using the ease of jQuery, that would change your code to look something like this:

HTML

Code: Select all

<body>
<form>
   <input type="text" id="ship1" value="0">
   <input type="button" id="btnAddShip" value=" /\ " style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
   <input type="button" id="btnSubShip" value=" \/ " style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
</form>
</body>

JS

Code: Select all

$(function() {  //essentially a document.ready function shortcut
  $('body').mouseup(function() {  
    if(window.on) {
      clearInterval(on);
    }
  });

  $('#btnAddShip').click(function() {
    on = setInterval('addShip("ship1")', 1);
  });

  $('#btnSubShip').click(function() {
    on = setInterval('subShip("ship1")', 1);
  });
});

Do note that this is not complete code, and should only really serve as a template (I probably made typos or used some functions incorrectly without meaning to!). I didn't really browse the functions themselves, only what you had in your HTML, and while doing so, I noticed that you had some things floating around which I don't know what equate to. In fact, what are you trying to accomplish with this extremely short interval?

Klown · Post by **Klown** » Mon Mar 04, 2013 3:52 pm

Ark wrote:Hi, if i'm not wrong what happens here is that inside
Code: Select all
onmousedown="on=setInterval('addShip(ship1)',1);" ...
ship1 is not being parse like a string ('ship1') but as a variable instead, and since ship1 is not defined the function wont run. So you'll have to 'escape the string' like this:
Code: Select all
onmousedown="on=setInterval('addShip( \'ship1\' )',1);"
hope it helps

Thanks for your input Ark! The escapes did the trick.

Klown · Post by **Klown** » Mon Mar 04, 2013 3:56 pm

Renavoid wrote:At a glance, Ark is quite correct.

Another approach would be to use what is called unobtrusive javascript (well, truly unobtrusive would suggest removing the javacsript's definitions entirely from the page and having a linked external file, but that's up to you). Instead of declaring onmousedown in the html, you wait for the DOM to load and then attach the event to the buttons. Using the ease of jQuery, that would change your code to look something like this:

HTML
Code: Select all
<body>
<form>
   <input type="text" id="ship1" value="0">
   <input type="button" id="btnAddShip" value=" /\ " style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
   <input type="button" id="btnSubShip" value=" \/ " style="font-size:7px;margin:0;padding:0;width:20px;height:13px;" >
</form>
</body>
JS
Code: Select all
$(function() {  //essentially a document.ready function shortcut
  $('body').mouseup(function() {  
    if(window.on) {
      clearInterval(on);
    }
  });

  $('#btnAddShip').click(function() {
    on = setInterval('addShip("ship1")', 1);
  });

  $('#btnSubShip').click(function() {
    on = setInterval('subShip("ship1")', 1);
  });
});
Do note that this is not complete code, and should only really serve as a template (I probably made typos or used some functions incorrectly without meaning to!). I didn't really browse the functions themselves, only what you had in your HTML, and while doing so, I noticed that you had some things floating around which I don't know what equate to. In fact, what are you trying to accomplish with this extremely short interval?

Thanks for the reply Renavoid. I'm just starting out with JS so I made this simple 1 page script to test a feature which I'm calling a spinner. It starts a text box with a value of 0 and as the user holds the mouse down on a up or down button the value in the text box will increase or decrease in value by 1, the short interval of 1 is set so the values increase or decrease fast, because some times there will be a need to increase or decrease the value by thousands.

Thanks again for your input. I'll be taking another look at JQuery again in the near future.

Renavoid · Post by **Renavoid** » Mon Mar 04, 2013 4:06 pm

I understand now. And, just so you know, you can still take the same approach without jQuery. I just prefer its syntax and shortcut methods. Good luck in your learning process!

[Resolved] - Help with Javascript Spinner

[Resolved] - Help with Javascript Spinner

Re: Help with Javascript Spinner

Re: Help with Javascript Spinner

Re: Help with Javascript Spinner

Re: Help with Javascript Spinner

Re: [Resolved] - Help with Javascript Spinner