title: Using local storage to change CSS background image
body: <p>I have a little trouble with a JavaScript piece of code.</p>
  
  <p>The code is as it follows:`</p>
  
  <pre><code>$(switchBackground);
  var oFReader = new FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
  
  oFReader.onload = function(oFREvent) {
      localStorage.setItem('b', oFREvent.target.result);
      switchBackground();
  };
  
  function switchBackground() {
    var backgroundImage = localStorage.getItem('b');
    if (backgroundImage) {
      $('#profile').css('background-image', 'url(' + backgroundImage + ')');    
    } 
  }
  
  function loadImageFile(testEl) {
    if (! testEl.files.length) { return; }
    var oFile = testEl.files[0];
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
    oFReader.readAsDataURL(oFile);
  }
  </code></pre>
  
  <p>`</p>
  
  <p>And my problem is the following, as  I don't have almost any knowledge in JavaScript I'm having a hard time figuring out how to clone that code.
  I have 2 <code>&lt;div&gt;</code>'s - one with <code>id="profile"</code> and the other with <code>id="start-menu"</code>, I want the users of my web page to be able to change the background image of both <code>&lt;div&gt;</code>'s but untill now I have only been able to change the <code>&lt;div&gt;</code> with the <code>id="profile"</code>. And the way that they change those backgrounds is through an input button, more exactly this one:</p>
  
  <pre><code>&lt;input id="test" type="file" onchange="loadImageFile(this)" /&gt;
  </code></pre>
  
  <p>I have already tried adding some other characters to some of the functions names, and then just change <code>id="test2"</code> or <code>onchange="loadImageFile2(this)</code>, but untill now I haven't been successful.
  By the way, I should mention that I don't want the backgrounds to be changed with the same button, there are 2 diffrent input buttons, both with the same structure as above (except for the function calling they are almost the same).</p>
  
  <p>What exactly do I need to change at the JS code above in order for it to work with both <code>div</code>'s? Please be at your clearest when writing an answer, as my primar language is not english and sometimes I understand certaint phrases a bit harder.</p>