We Keep Coding

Im building a clicker game and localstorage is returning with nothing instead of saved data

So I'm building a clicker game on CodePen and I ran into a problem while coding my save/load functions. It seems as if my save function may not me working, but I'm not sure why.Here are the functions:
function savegame(){
localStorage.clicks = Number(document.getElementById('clicks').innerHTML);
localStorage.cps = document.getElementById('cps').innerHTML;
localStorage.clickPower =
Number(document.getElementById('clickpower').innerHTML);
localStorage.onecpow = Number(document.getElementById('1clickpowe').innerHTML);
localStorage.onecps = Number(document.getElementById('1cps').innerHTML);
localStorage.fivecps = Number(document.getElementById('5cps').innerHTML);
localStorage.fivecpow = Number(document.getElementById('5clickpower').innerHTML);
localStorage.tencps = document.getElementById('10cps').innerHTML;}
function loadgame(){document.getElementById('1clickpower').innerHTML = localStorage.getItem("onecpow");
document.getElementById('clicks').innerHTML = localStorage.getItem("clicks");
document.getElementById('cps').innerHTML = localStorage.getItem('cps');
document.getElementById('clickpower').innerHTML = localStorage.getItem('clickpower');
document.getElementById('5clickpower').innerHTML = localStorage.getItem('fivecpow');
document.getElementById('5cps').innerHTML = localStorage.getItem('fivecps');
document.getElementById('1cps').innerHTML = localStorage.getItem('onecps');
document.getElementById('10cps').innerHTML = localStorage.getItem('tencps');}
I forgot to clarify what I'm expecting the code to do. What this should do is save the players progress and upgrades, instead upon loading the saved data the players data is not loaded and returns many blank spaces where saved data should have been loaded.

Instead of doing localStorage.onecpow = "someValue" try
storage.setItem(onecpow, "someValue");
You can check the Storage docs here for more info

You are using 'localStorage' wrong. Have a look at this:
// writing to localStorage
localStorage.setItem('myId', value);
// reading from localStorage
var whatever = localStorage.getItem('myId');
// remove an item from localStorage
localStorage.removeItem('myId');
EDIT:
The problem is that you're mixing up 2 different approaches. You have to decide which one to use. Either the object-driven or the key-driven.
My example above is the key-driven approach. You should also be able to use the object-driven approach like this:
// writing to localStorage
localStorage.myObject = value;
// reading from localStorage
var whatever = localStorage.myObject;
Choose your style, but don't mix them. ;o)

I found a solution, though it's kind of strange how it works.
I added capital letters to the localStorage attributes and used localStorage.setItem and localStorage.getItem. Don't know why it works but it does.

My JSLink script will not work

I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.
~sitecollection/site/folder/folder/file.js
And
~site/folder/folder/file.js
The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?
Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields = {
// Add field and point it to your rendering function
"Title": { "View": overrideTemplate },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).
~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js
You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!
I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.
Hope this helps.

ImageJ: .show() does not show an image

I very new to javascript and I would like to process some images in Fiji. I have been using the macro language for a while, but I am trying to get familiar with the formal ImageJ/Fiji API. I am trying to run the folowing simplistic piece of code, it runs with no errors but it does not show any image in the end. What's going wrong?
importClass(Packages.ij.plugin.filter.GaussianBlur);
var image = IJ.openImage("/home/.../KNIIC_BC_Cam2_AirBubble2_Image1038.bmp");
IJ.run(image, "8-bit", "");
var dpl = image.getProcessor().duplicate();
var gs = new GaussianBlur();
gs.blur(dpl,20);
new ImagePlus(gs).show();
Thanks in advance

The problem is the way how you deal with the ImagePlus: in the last line, you try to create a new ImagePlus, but there is no chance that this contains any information of your loaded image.
GaussianBlur processes an ImageProcessor that you'll get via the ImagePlus#getProcessor() method. If you look at the API documentation, you'll also see that blur(ImageProcessor,double) is deprecated in favor of one of the other methods: you might want to use blurGaussian(ImageProcessor, double, double, double)here.
This code would work:
importClass(Packages.ij.plugin.filter.GaussianBlur);
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
var ip = imp.getProcessor();
var gs = new GaussianBlur();
gs.blurGaussian(ip,20,20,0.01);
imp.show();
however it uses the low level way of interfering with the GaussianBlur class. To make your life easy, you can also record the javascript command in the GUI via Plugins > Macros > Record... and then choosing Record: Javascript before performing the Gaussian blur via Process > Filters > Gaussian Blur.... This would make your code much shorter:
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
IJ.run(imp, "Gaussian Blur...", "sigma=20");
imp.show();
For general help with Javascript scripting in ImageJ, see these two links to the Fiji wiki.
Edit: Starting from ImageJ 1.47n5, ImageProcessor has a new method blurGaussian(double sigma), shortening the above (low level) code to:
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
imp.getProcessor().blurGaussian(20);
imp.show();

Creating a custom echo node with web-audio

I'm playing with the webkit Audio API and I'm trying to create an Echo effect, to accomplish that I've connected a DelayNode with a GainNode in a loop (The output of one is the input of the other, and viceversa).
The effect works fine, but now I want to create an EchoNode Object that I can just plug-in and connect with the other AudioNode objects.
Something like:
myEchoNode = new EchoNode();
myConvolverNode = context.createConvolver();
myConvolverNode.connect(myEchoNode);
I think that I should make my EchoNode inherit from AudioNode, so that the connect function of every other AudioNode would work, but I don't know how to do that in Javascript with the web Audio API.
Can anyone give me a hint, or if you think that there is a better way to accomplish that I would greatly appreciate it.
Thanks

Oskar's solution should do the trick, but I want to point out that it will require you to connect to your EchoNode in a nonstandard way (using EchoNode.input rather than simply connecting to the EchoNode itself). For simple effects such as feedback delay, this can be avoided by creating the EchoNode via a factory function that returns a native DelayNode mixed with some extra properties. Here's an example from SynthJS:
function FeedbackDelayNode(context, delay, feedback){
this.delayTime.value = delay;
this.gainNode = context.createGainNode();
this.gainNode.gain.value = feedback;
this.connect(this.gainNode);
this.gainNode.connect(this);
}
function FeedbackDelayFactory(context, delayTime, feedback){
var delay = context.createDelayNode(delayTime + 1);
FeedbackDelayNode.call(delay, context, delayTime, feedback);
return delay;
}
AudioContext.prototype.createFeedbackDelay = function(delay, feedback){
return FeedbackDelayFactory(this, delay, feedback);
};
As you can see, the result is a native DelayNode that can be connected to other nodes in the standard fashion, but it has an attached gain node that provides the feedback effect.

Have a look at this article I wrote, it might give you some ideas: http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-audio/ (which explains the basic idea behind tuna.js that Taoist recommended).

What technologies should I use to load content into a dynamic div?

I have an interesting project in mind, and I have a question. You can see the look from my jank design below:
I have a variety of technologies I'm planning on leveraging. To give you an idea:
node.js (for various servers)
WebSockets (for chat client and some content I'd rather not disclose)
canvas (for part of the #content)
Now, with this in mind, I have no problem leveraging technologies that are not supported by most browsers. That's not any concern.
For my question, on the page I have laid out above, the only thing I want to change (besides the updating chat feature) is the content. I would like to load the "Home", "About", "Contact" and "Login" sections of my website into the #content portion of the page.
Now, I have an instinct to say the best way to achieve this goal is through AJAX, but I'm not sure. Since I could possibly just set up some files with the HTML I'd like to display, and then onclick, load them into the #content section.
Is this the best method to use? I'm looking for practicality and performance.
Sorry for the bizarre question.
Thanks!

If you are wanting to load these sections dynamically, ajax is the only way to go. I would definitely check out using a JavaScript library to handle the internals of making ajax calls for you, as writing this part from scratch can be difficult to do in a cross-browser manner. I would highly recommend jQuery for this: http://jquery.com/
I saw you mentioned WebSockets. WebSockets can be good for offloading some intensive JS processing, but it cannot be used for interacting with the DOM (e.g. accessing HTML elements, changing their content, getting form values, etc.).

Alternatively, you can decide not to have to learn AJAX, or deal with external Comet libraries, and use something like NOLOH which takes care of all these plumbing issues for you allowing you to focus on your application. For example, I took the liberty to create an actual NOLOH application based on your mockup design, which automatically uses AJAX for the content, and uses NOLOH's built in Comet support for the chat.
Click here for functioning example: http://www.noloh.com/Demos/StackOverflow1
As you can see from the very basic code (all of the code) posted below, and on github here, you simply lay out your objects, and tell them what you would like to do. NOLOH takes care of the rest, and handles all cross browser issues, client-server issues, and most other things you can imagine.
NOTE: This is only one of many ways to approach it, I could've used different layout types, more concise syntax, class variables instead of locals and external CSS, but I felt a simple approach would make things clearer. Also, sorry for using the unwieldy Yahoo URL as it was the most readily available.
require_once('/NOLOH/NOLOH.php');
class StackOverflowExample extends WebPage
{
function __construct()
{
parent::WebPage('StackOverflow 5672167');
$nav = new Panel(0, 0, 600, 30);
$chat = new Panel(0, $nav->Bottom, 200, 500);
$content = new MarkupRegion('', $chat->Right, $chat->Top, 400, 350);
$rooms = new Panel($content->Left, $content->Bottom, 400, 150);
$footer = new Panel(0, $chat->Bottom, 600, 50);
$chat->BackColor = Color::LightGreen;
$content->BackColor = Color::Yellow;
$rooms->BackColor = Color::Orange;
$footer->BackColor = Color::Gray;
$this->Controls->AddRange($nav, $chat, $content, $rooms, $footer);
$sections = array('HOME', 'ABOUT', 'CONTACT', 'LOGIN');
foreach($sections as $section)
$nav->Controls->Add(new Link(null, $section, 0, 5))
->Click = new ServerEvent($this, 'LoadSection', $content, $section);
$nav->Controls->AllCSSMarginRight = '5px';
$nav->Controls->AllLayout = Layout::Relative;
$nav->CSSTextAlign = 'right';
//Comet (Listener), Bind to Yahoo Flickr API through YQL
$this->Controls->Add($listener = new Listener(
'http://query.yahooapis.com/v1/public/yql?q=select%20source%20from%20flickr.photos.sizes%20WHERE%20photo_id%20in%20(select%20id%20from%20flickr.photos.recent)%20and%20label%3D%22Thumbnail%22',
new ServerEvent($this, 'LoadImage', $chat)));
//Default Section
$this->LoadSection($content, URL::GetToken('section', 'HOME'));
}
function LoadSection($contentPanel, $section)
{
$section = strtolower($section);
if(file_exists($file = 'Content/' . $section))
{
$contentPanel->Text = file_get_contents($file);
URL::SetToken('section', $section);
}
}
function LoadImage($chat)
{
foreach(simplexml_load_string(Listener::$Data)->results->size as $photo)
{
$url = $photo['source'];
$chat->Controls->Add($image = new Image((string)$url, rand(0, $chat->Width), rand(0, 200), 100, 100));
Animate::Top($image, $chat->Height - $image->Height, 3000);
Animate::Opacity($image, Animate::Oblivion, 3000);
}
}
}
Alternatively, you can use the NOLOH NavHandler Nodule, so that your content is bookmarkable without you having to worry about implementing the very basic NOLOH Token functions, which I took the liberty to add here (URL::GetToken), so that the app is bookmarkable.
You're free to sign-up for a free NOLOH sandbox, and copy the code into your sandbox and play around with it. One way would be to change the MarkupRegion to an EditRegion so you have automatic edit-in-place capabilities.
Disclaimer: I'm a co-founder of NOLOH