[solved] Javascript problem - how to squeeze Javascript into blogger.com post?

I am trying to hack together a Javascript demo for my daughter’s maths class on my blogger.com website. I seem to be able to insert the script tags into the body but I can’t get the script to run… What do I need to do?

Apologies for my very limited Javascript skills.


<div class='post-body entry-content' id='post-body-8047293808682296136' itemprop='description articleBody'>
<script>
function func0001() {
    document.getElementById('c0').setAttribute("style","display:inline-block; background-color:rgb(255,20,20); margin-right: 1em; width: 3em; height: 5em;");
}
</script>
<span id="c0" onclick="func0001()" style="display:inline-block; background-color:rgb(255,20,20); margin-right: 1em; width: 3em; height: 10em;">
<a href="javascript:func0001()">--0--</a></span>
<span id="c1" style="display:inline-block; background-color:rgb(255,40,40); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c2" style="display:inline-block; background-color:rgb(255,60,60); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c3" style="display:inline-block; background-color:rgb(255,80,80); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c4" style="display:inline-block; background-color:rgb(255,100,100); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c5" style="display:inline-block; background-color:rgb(255,120,120); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c6" style="display:inline-block; background-color:rgb(255,140,140); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c7" style="display:inline-block; background-color:rgb(255,160,160); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c8" style="display:inline-block; background-color:rgb(255,180,180); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<span id="c9" style="display:inline-block; background-color:rgb(255,200,200); margin-right: 1em; width: 3em; height: 10em;">--0--</span>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

Please ignore - the blogger.com preview mode does not support javascript somehow.