title: How to change a json property on an event?
body: <p>I want to know, how to dynamically change the value of a json property on a jquery event and then loads it up on the browser. Here's the sample json.</p>
  
  <pre><code>var spiderman = {
     "fname" : "Peter",
     "lname" : "Parker",
     "nick" : "Spidey"
  }
  </code></pre>
  
  <p>and here's the event, let's say... a click event</p>
  
  <p>HTML code</p>
  
  <pre><code>Input a new nickname:&lt;br /&gt;
  &lt;input type="text" id="newNick" /&gt;
  &lt;div id="pressMe"&gt;Press Me!&lt;/div&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery event</p>
  
  <pre><code>$("#pressMe").click(function(){
     var newNick = $("#newNick").val();
  
     /* please place the correct code here */
  
     $("#output").text("Spiderman's new nick is " + spiderman.nick);
  })
  </code></pre>
  
  <p>The goal is:
  The user inputs the new nickname. When the user clicks <strong>#pressMe</strong>, it will get the value of <strong>#newNick</strong> and place it inside json to change the "nick" property. After that... it will show the new "nick" property on <strong>#output</strong>.</p>
  
  <p>I hope its not confusing. Thank you!</p>