Hello, newish to JS variables; wracking my brain trying to understand how to assign a variable to the following function.

For this example, I am setting up a simple input button to call markup into a Div box.

JS Portion:
Code:
<script language="JavaScript">
function changeContent() {
document.getElementById('output_div').innerHTML="<b>called data</b>";
}
</script>
HTML Portion:
Code:
<input type="button" value="Call Data" onClick="changeContent()">

<div id="output_div">output div area</div>
so far, so good. But lets say I want TWO buttons for separate markup strings into the same div... id have to use variables.

This is where things go south, please help me understand where I went wrong , and what I should correct in the following code:

-JS:
Code:
<script language="JavaScript">
var cats = function() {
document.getElementById('output_div').innerHTML="<i>meow.</i>";
}
var dogs = function() {
document.getElementById('output_div').innerHTML="<b>WOOF!</b>";
}
</script>
-HTML:
Code:
<input type="button" value="Mice!" onClick="changeContent('cats')">
<br>
<input type="button" value="Bones!" onClick="changeContent('dogs')">

<div id="output_div">output div</div>
Doesnt work, not at all, not even with one button.

Where did I mess up? ..and what should this code look like instead?

Thanks yall!