Page 1 of 1
[Resolved] - Help with Javascript Spinner
Posted: Sun Mar 03, 2013 8:58 pm
by Klown
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>
Re: Help with Javascript Spinner
Posted: Mon Mar 04, 2013 5:34 am
by Ark
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
Re: Help with Javascript Spinner
Posted: Mon Mar 04, 2013 3:33 pm
by Renavoid
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?
Re: Help with Javascript Spinner
Posted: Mon Mar 04, 2013 3:52 pm
by Klown
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.
Re: Help with Javascript Spinner
Posted: Mon Mar 04, 2013 3:56 pm
by Klown
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.
Re: [Resolved] - Help with Javascript Spinner
Posted: Mon Mar 04, 2013 4:06 pm
by Renavoid
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!