title: How Would i change the content of a webpage with the Onclick Function using a function
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changecontent(description){
       console.log(description);
       document.getElementById('content').innerHTML = description;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
  
  &lt;div class="editingfunction"&gt;
  &lt;ul style="list-style-type:none"&gt;
  
  &lt;li&gt;Please Mouse Over Subject&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Math&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Science&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Geography&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Arts&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Buisness&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Health&lt;/li&gt;
  &lt;li onClick="changecontent();"&gt;Social Science&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm planning to make multiple layouts for the page and based on which item is clicked the content should be changed accordingly. The problem is that I don't know how to make the java function change the content differently based on which item is clicked... </p>