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:
<script language="JavaScript">
function changeContent() {
document.getElementById('output_div').innerHTML="<b>called data</b>";
}
</script>
HTML Portion:
<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:
<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:
<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!