I've had a look round and I'm a little confused.
There seems to be several responses to my particular problem but I don't fully understand.
So if anybody could help that'd be great!
Basically, I set a variable
var firstThumb = "02"
And I want to increase it
function thumbIncrease() {
firstThumb++
};
on an interval
setInterval(function(){
getThumb.trigger("click");
thumbIncrease();
}, 5000);
Basically what I expect to happen is -
Every 5 seconds a click is triggered, and I want my firstThumb variable to increase by 1.
So 02, click, 03, click, 04, click....
So each time it clicks a different element.
Any help would be great!
Thanks!!
EDIT
Thanks for the responses! I kind of understand now! So the reason I've got a 0, is more for me than for the code. I currently have 15 things that I need clicking. 01 and 15 being 2 characters, meaning my code looks neater. Should I just man up and remove the 0? Or is there a better way of doing it?
var counter = 1;
setInterval(function() {
var _text = counter + "<br>";
$("div").append(_text);
counter++;
},5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
</div>
If you want it to replace the old number use .html() instead of .append()
"01" is a string, 1 is a number you can increment.
If you just need zero padding:
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
var thumbNumber = "02";
thumbNumber = parseInt(thumbNumber);
var nextNumber = pad(++thumbNumber,2);
console.log(nextNumber);
Live Demo -- http://jsfiddle.net/v02vgw6w/2/
Related
I want to start with a large number in a variable, and while it is larger than another number, subtract 100 from the variable. I then want the loop to put the variable in the "demo" paragraph, which should end up being 89. Any help is appreciated.
var x = 789
while x > 100 {
x = x-100
}
document.getElementById("demo").innerHTML = x;
<p id="demo"></p>
Your while condition must be wrapped in parentheses.
var x = 789
while (x > 100) {
x = x-100
}
document.getElementById("demo").innerHTML = x;
<p id="demo"></p>
Using parenthesis in the while will fix your problem, just a small syntactical error
var x = 789
while (x > 100) {
x = x-100
}
try this,
function sub(x){
while(x > 100){
x = x-100
}
return x
}
document.getElementById("demo").innerHTML = sub(789);
Uhm - ok - I am really really really rusty at programming, but... you want to generate a predetermined static number and place that static number in a static html element programmatically? WTF man?
<p id="demo">89</p>
Is your solution.
No Javascript req'd. Unless you were hoping for a 'countdown' effect which:
1) Wont work with this code.
2) Wont work with corrected code.
3) Would work with a different methodology so fast you wont see it (you would have to introduce 'sleep' timers and so on).
It's been a bad day please don't take a picture.
I'm trying to validate that two range inputs who filter age do not go over one another. I can't find a way to have it done properly without the sliders behaving erratically, jumping from 0 to 50, and things like that.
I've tried different approaches (pure JS) with similar results:
if(input1.value >= input2.value || input2.value <= input1.value){
input1.value = toString(input2.value - 1);
input2.value = toString(input1.value + 1);
}
This one makes the sliders jump back to 50. I can't remember what else I've tried, but all do sort of the same thing. Either jump back to 50, or the minimumRange jump from 2 or 3 to 100.
I'd rather not use jQuery if at all possible
Here's the fiddle with the whole thing:
JSfiddle Validation and filters
Thank you!
This is how the function looks like now:
function filtroEdad(input1, input2) {
var edadMin = Number(input1.value);
var edadMax = Number(input2.value);
if(edadMin >= edadMax){
input1.value = (edadMax - 1).toString();
}
if(edadMax <= edadMin){
input2.value = (edadMin + 1).toString();
}
Thank you, #RaphaMex !!
Can't reproduce your issue in your fiddle, but I already see 2 issues in your code:
if input1.value is "50", then input1.value + 1 will be "501"
toString() should be called on numbers: 50.toString()
So your code should look like:
var minEdad = Number(input1.value),
maxEdad = Number(input2.value);
if(minEdad >= maxEdad) {
// Decide here what to do, for example
input1.value = (maxEdad - 1).toString();
}
I'm attempting to build an app that calculates sales metrics. I have run into an unusual problem in my build.
Part of the app allows users to increase/decrease a variable by 5% and then see how that will effect an overall metric. It also allows the user to see the percentage increase/decrease.
I have the functionality working roughly as intended, however if I enter a number lower than 20 into the input and then try in increase it with my incrementing function it only increments once and then stops.
If the number I enter into the input is 20 or greater it increments in the intended way.
Below is my angular code:
function controller ($scope) {
$scope.firstNumber = 0;
$scope.firstPercent = 0;
$scope.increase = function(id) {
var A = parseInt(id);
var B = A * 5/100;
var C = 0;
var C = A + B;
if (id === $scope.firstNumber) {
$scope.firstNumber = C;
$scope.firstPercent = $scope.firstPercent + 5;
}
};
$scope.decrease = function(id) {
var A = parseInt(id);
var B = A * 5/100;
var C = 0;
var C = A - B;
if (id === $scope.firstNumber) {
$scope.firstNumber = C;
$scope.firstPercent = $scope.firstPercent - 5;
}
};
I can't see anything wrong with my maths, my thinking is that perhaps I'm approaching angular in the wrong way. However I'm not sure.
I have put together a fiddle that shows the full code.
jsFiddle
I have updated the fiddle to use parseFloat. Seems like the numbers are incrementing now.
var A = parseFloat(id);
http://jsfiddle.net/kjDx7/1/
The reason why it was working with values above 20 was that it was just reading the part before decimals each time it tried to increase. So 20 became 21 and 22.05 and so on. As long the the value before decimal kept changing, it showed different (but incorrect) answers.
On the other hand, 10 became 10.5 which when parsed yielded 10. As you can see, this cycle continued endlessly.
The reason why you face the issue is because 5% of anything less than or equal to 20 is less than or equal to 1.
When you parseInt() the value, you always end up with the same number again.
Take 15 for example.
5% of 15 = 15.75
After parseInt(), you get the value 15 again.
You use the same value to increment / decrement each time.
Hence for values below 20, you don't get any changes.
As #Akash suggests, use parseFloat() instead - or why even do that when the value that you get is float anyway
I made a fork of your fiddle. I'm not completely sure what you want to achive.
Take a look at this fiddle.
$scope.increase = function() {
$scope.firstPercent = $scope.firstPercent + 5;
var A = $scope.firstNumber;
var B = (A / 100) * $scope.firstPercent;
var C = A + B;
$scope.firstNumberWithPercent = C;
};
update
After posting, i see that question is already answered. But is this what you really want? When you hit increase, it takes 5 % off of the number in the input field. That is ok, but when you hit decrease after that, it takes 5 % off the number in the same field. So your starting point is different.
100 + 5/100 = 105
105 - 5/105 = 99,75
what I am trying to do is give the user a textarea (with enabled input) and allow him to write up to 10 chars. Actually, the textarea should ALLOW more chars, not only 10, and the other chars would behave accordingly:
1º There is a setTimeout whenever the user is on the 11ºchar. So, I'm writing something there, I reach the char number 10º (the "maximum" allowed of text) and want that other char to be erased AFTER a given time.
somethinge = 10 chars.
anotherwor = 10 chars.
input: somethingeiefjaiehf
after 5 seconds:
input: somethinge
input: anotherwordtotestthisandseeifitworks
after 5 seconds:
input: anotherwor
2ºTo accomplish this I basically attached a clearTimeout to a global variable:
//Function "countChar(val)" is activated with the keydown event
var timer_to_op = null;
function countChar(val) {
var len = val.value.length; //lenght of input in textarea
clearTimeout(timer_to_op);
//...
//irrelevant code
//...
}else if(len > 140){
$("#status_toOp_num").text(145-len);
timer_to_op = setTimeout(function(){
val.value = val.value.substring(0, 140);
},5000);
}
Actually, for some reason, it won't work. If the user is typing AND he types another char within the 5 seconds then I want the timer to restart.
input: anotherwor
input: anotherword (+d) timer = 1...2...3...
input: anotherworde (+e) timer = 1...2...
input: anotherwordef (+f) timer = 1...2...3...4...5!
input: anotherwor the user took more than 5 seconds so it erased the excedent.
Hope I got my point through. Any ideas on this one? Thank you very much! (I didn't put any html, it's only <textarea onclick="countChar(this)"> )
I didn't really try to understand what you are doing in your code, seems unnecessarily complicated.
Check this fiddle out. http://jsfiddle.net/Q2h5f/
HTML
<textarea id="limitText">0123456789</textarea>
Javascript
var tarea = document.getElementById("limitText");
tarea.onkeypress = checkInputText;
var timer = null;
function checkInputText(e) {
if (timer) clearTimeout(timer);
timer = setTimeout(limitTextLength, 5000);
}
function limitTextLength() {
var tareaVal = document.getElementById("limitText").value.toString();
if (tareaVal.length > 10) {
tarea.value = tareaVal.slice(0, 10);
}
}
Should solve your issue.
Very simple code, very simple problem. When a link is pressed, it moves a div either up or down. However, I cannot get it to move incrementally. I know this is a simple syntax error, but google isn't revealing the error of my ways. Anyone willing to enlighten me?
<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom -='167px';">«</a>
<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom +='167px';">»</a>
I already have it so that the div tiles itself vertically, so I'm not worried about it going "too high" or "too low"
Here's what it looks like right now: drainteractive.com/FBD/projects.php
You have to parse the value from the string containing px
// Increase by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) + 167) + ' px'
// Decrease by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) - 167) + ' px'
// Abstracted
function addToBottom(el, amount) {
// You probably add lower and upper bound check conditions
el.style.bottom = (parseInt(el.style.bottom) + amount) + ' px';
}
var el = document.getElementById('innerscroll');
addToBottom(el, 167);
addToBottom(el, -167);
Also be sure to make it work for cases where bottom wasn't set initially
var currentBottom = parseInt(document.getElementById('innerscroll').style.bottom) || 0;
+='167px' will concatinate it an it will become '167px167px167px167px167px'. Not sure what will result -='167px', but probably will result an error.
You need to rip the 'px' off the string, convert(?) it to an int, then subtract from that.
onclick="var mElem = document.getElementById('innerScroll'); mCur = parseInt(mElem.style.bottom.replace('px', 0)); mElem.style.bottom = (mCur-167)+'px'"
Naturally, this should all be put into a separate function, who is then called in the onclick, rather than the monstrosity above.
function moveUp()
{
var mElem = document.getElementById('innerScroll');
var mCur = parseInt(mElem.style.bottom.replace('px', 0));
mElem.style.bottom = (mCur-167)+'px';
}
...
<strike>onlick="moveUp()"</strike>
onclick="moveUp()"
My mind must have been somewhere else..