Why won't JavaScript run?

Question

I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.

When I type <script>something</script> into the text area and click a button, the script doesn't execute.

Please help! Here is the code:

<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you  can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<a href="javascript:makeCode()"><button type="button">Run Code!</button></a>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>

Answer 1

Here is the working code:

<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you  can fix it later!
</span>
<form name="userCode">
    <textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
    <br/>
    <button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
    function makeCode() {
        var userCode=document.forms["userCode"]["userCode"].value;
        document.getElementById('finishedProduct').innerHTML = userCode;
    }
</script>

Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.

Please let me know if you need any more help

I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/ Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.

Answer 2

I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/

I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.

Here is the revised javascript:

var myButton = document.getElementById("btnRunCode");

myButton.addEventListener("click", makeCode);

function makeCode() {
    var userCode=document.forms["userCode"]["userCode"].value;
    document.getElementById('finishedProduct').innerHTML = userCode;
}

I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.