I'm looking to create quite a few variables in JavaScript for storing boolean variables in HTML5 Web Storage. I want the variables to be as follows:
localStorage.title1 = '0';
localStorage.title2 = '0';
localStorage.title3 = '0';
And so on ...
The problem I face is that I want to create these variables all the way to localStorage.title570.
I have tried the following code, of which I was suspect to it's failure:
function registerUser() {
for(i=1;i<571;i++)
{
var a = "title" + i;
localStorage.a = 0;
}
}
However, this doesn't appear to work. I'm looking for an easy way to create these 570 variables in order to track progress of a user. I have looked at PHP and MySQL but I feel this will hopefully prove slightly more easy. However, if not, I shall simply use PHP and MySQL.
Use something like this instead:
for(i=1;i<571;i++)
{
localStorage['title' + i] = 0;
}
or better:
for(i=1;i<571;i++){
localStorage.setItem('title' + i, '0');
}
A slightly different solution would be to use an array instead of indexing the variable names.
So...
function registerUser() {
localStorage.title=[];
for(i=0;i<570;i++)
{
localStorage.title.push(0);
}
}
Or if you didnt need to initiaise the values to 0 then it would just be.
function registerUser() {
localStorage.title=[];
}
Note that now the index starts at 0 instead of 1.
Related
Before I start, I'd just like to say that there are already answered questions on this topic, and I looked them up - but because I'm still somewhat of a beginner, I can't really figure out the answer as it's too complex for me. So I wanted to give my own example, a dead simple one, and try to understand based on that.
Essentially what I want to do is run a function when an already existing variable, with a defined value, changes its value. Something like this:
var testVar = 5;
function letMeKnow() {
console.log("The variable has changed!);
}
What I want is, when I go to the console and type, say testVar = 7, I want the letMeKnow() function to run, and print something out in the console. More specifically, I want JavaScript to detect that the variable has changed, and run the function automatically. I know that this used to be possible with Object.observe() or Object.watch(), but since those are deprecated I suppose that I have to use getters and setters to achieve this. My question is, how would I do that for this example, keeping it as simple as possible?
Thanks!
A simple example using getter/setter can be like:
var obj = {
value: '',
letMeKnow() {
console.log(`The variable has changed to ${this.testVar}`);
},
get testVar() {
return this.value;
},
set testVar(value) {
this.value = value;
this.letMeKnow();
}
}
console.log(obj.testVar)
obj.testVar = 5;
console.log(obj.testVar)
obj.testVar = 15;
console.log(obj.testVar)
Currently I can do:
function addStat() {
player.str = player.str + 1;
}
But I want to be able to use things other than just "str" with my player object. So I decided with doing something like this:
function addStat(stat) {
player.stat = player.stat + 1;
}
But that doesn't seem to work, iv'e tried looking up the syntax for using parameters but could not find anything similar to the way I need.
I learned about "this" but I can't get it to work with my function.
I thought this:
function addStat(thing, stat) {
thing.stat = thing.stat + 1;
statReset();
}
would work but I can see why it won't. I made sure the rest of my javascript and html work and when I add those functions nothing breaks, it just doesn't work.
When assigning properties with a variable, you need to use bracket notation, as opposed to dot notation. This, then, looks like:
function addStat(stat) {
(stat in player) ? ++player[stat] : player[stat] = 1;
}
Due to comments (that I disagree with), I figured I should mention that since you are attempting to modify a property that may not exist, you should also add a safety check to see if you can modify it.
Otherwise you will be modifying undefined, and that will cause undesired output..
You can access properties with []:
function addStat(prop) {
player[prop] = player[prop] + 1;
}
so calling addStat("stat") will actually set player.stat.
In javascript, the syntax
object.key
is equivalent to
object["key"]
So your thing.stat is equivalent to thing["stat"], i.e. the key is the literal string "stat" when what you really want is to use the value referenced by the parameter stat as the key:
thing[stat] = thing[stat] + 1;
For one reason or other ( I'm not going to go into why here) I need to use javascript to get the values of 12 hidden input fields and set a variable for each value.
I am not sure what the best approach for this would be. I'd like to be able to get the values and if they are not created i.e. the input fields are not there then id like to generate an error.
Would using a try / catch be good for this or should I simply be using typeof to check the variables have been created?
would putting them in an array as well so i can loop through to check their existance be a good idea?
thanks
This is the easy way of doing it. try-catch is rather heavy. Also, where would you throw the error to? Instead of unwinding your flow on error, collect your errors into a well structured response. That way if your first one is missing, but the other X are not, then you still get some work done.
if ( typeof( something ) !== "undefined" ) { doStuff(); }
Otherwise, I'd need more information to help you with your question.
Here's simple function that will check to see that exactly 12 input elements are included on the page. Please provide more information if you need th check that individual input elements are present.
function SaveInputValues() {
var inps = document.getElementsByTagName('input');
if (inps.length !== 12) {
return alert("There must be exactly 12 input elements. You have included " + inps.length + ".");
}
var vals = [];
for (i = 0; i < inps.length; i++) vals.push(inps[i].value);
inps = null; // provides closure
}
if(document.getElementById("someID")){
// add the value since the input exists
}
else{
// skip or use default - and inform if need be
}
Example implementation:
http://jsfiddle.net/zVz6h/1/
Code:
function getValueArray(idArray){
var valArray = [];
for(var i=0;i<idArray.length;i++){
if(document.getElementById(idArray[i])){
valArray.push(document.getElementById(idArray[i]).value);
}
else{
valArray.push("not defined");
}
}
return valArray;
}
var txtIDs = ["txt1","txt2","txt3","txt4","txt5","txt6","txt7","txt8"];
alert(getValueArray(txtIDs));
What can I do to retrieve a conditional variable from inside a function in the webpage being parsed by greasemonkey?
Something like this:
var myglobal = 5;
function myfunc() {
myglobal = myglobal -1;
if (myglobal == -1) {
var this1 = 'Test';
document.getElementById("mybutton").href = this1;
}
}
In this case I would like to read what is in 'this1', either directly or modifying 'myglobal', calling 'myfunc' and somehow getting the value of href from 'mybutton'... any ideas?
You usually can't get a variable value from outside a scope like that, but you may not have to in this case.
"myfunc is a counter, and I want to skip it, otherwise mybutton.href won't be set yet."
Based on the sample code, you might be able to cheat that timer just by using:
unsafeWindow.myglobal = 0;
(In fact, I use this exact technique on one very misguided training site.)
To answer the stated question further, you cannot get dynamic values from within such a scope but the initial state may be enough, as it appears to be for this question.
So you could get myfunc()s code and parse it with regex to obtain the desired value:
var theFunc = unsafeWindow.myfunc.toString ();
var desiredHref = theFunc.match (/var\s+this1\s*=\s*["']([^"']+)["']/);
if (desiredHref.length > 1) {
// Found!
desiredHref = desiredHref[1];
}
i'm implementing a charcounter in the UI, so a user can see how many characters are left for input.
To count, i use this simple function:
function typerCount(source, layerID)
{
outPanel = GetElementByID(layerID);
outPanel.innerHTML = source.value.length.toString();
}
source contains the field which values we want to meassure
layerID contains the element ID of the object we want to put the result in (a span or div)
outPanel is just a temporary var
If i activate this function, while typing the machine really slows down and i can see that FF is using one core at 100%. you can't write fluently because it hangs after each block of few letters.
The problem, it seems, may be the value.length() function call in the second line?
Regards
I can't tell you why it's that slow, there's just not enough code in your example to determine that. If you want to count characters in a textarea and limit input to n characters, check this jsfiddle. It's fast enough to type without obstruction.
It could be having problems with outPanel. Every time you call that function, it will look up that DOM node. If you are targeting the same DOM node, that's very expensive for the browser if it's doing that every single time you type a character.
Also, this is too verbose:
source.value.length.toString();
This is sufficient:
source.value.length;
JavaScript is dynamic. It doesn't need the conversion to a string.
I doubt your problem is with the use of innerHTML or getElementById().
I would try to isolate the problem by removing parts of the function and seeing how the cpu is used. For instance, try it all these ways:
var len;
function typerCount(source, layerID)
{
len = source.value.length;
}
function typerCount(source, layerID)
{
len = source.value.length.toString();
}
function typerCount(source, layerID)
{
outPanel = GetElementByID(layerID);
outPanel.innerHTML = "test";
}
As artyom.stv mentioned in the comments, cache the result of your GetElementByID call. Also, as a side note, what is GetElementByID doing? Is it doing anything else other than calling document.getElementById?
How would you cache this you say?
var outPanelsById = {};
function getOutPanelById(id) {
var panel = outPanelsById[id];
if (!panel) {
panel = document.getElementById(id);
outPanelsById[id] = panel;
}
return panel;
};
function typerCount(source, layerId) {
var panel = getOutPanelById(layerId);
panel.innerHTML = source.value.length.toString();
};
I'm thinking there has to be something else going on though, as even getElementById calls are extremely fast in FF.
Also, what is "source"? Is it a DOMElement? Or is it something else?