Error: Uncaught TypeError: undefined is not a function

Question

I am trying to make a js game though when I try and trigger a function using onclick nothing happens and then when I went onto console it came up with this error message everytime I clicked it:

Uncaught TypeError: undefined is not a function

This is how I define my function:

var myfunction = function () {

I know that it is nothing to do with the function though as I call it after I make it and it works fine.

I have also checked whether it is the click by putting an alert in the onclick though that worked fine.

I know this is a common problem, though have looked at others and found nothing.

http://jsfiddle.net/Hive7/DQnmF/

JavaScript:

var attack = function () {
    while (slaying === true) {
        if (youHit !== 1) {
            totalDamage = totalDamage += damageThisRound;
            document.getElementById('hit').style.display = 'inline';  
            //alert('You hit!!! ' + totalDamage * 10 + ' damage');
            health = health - totalDamage * 10;
            setTimeout(function(){document.getElementById('health').style.width = health + 'px'}, 400);
            setTimeout(function(){document.getElementById('hit').style.display = 'none'}, 500);
            if (totalDamage >= 4) {
                //alert('the dragons dead');
                slaying = false;
            }
        } else {
            document.getElementById('miss').style.display = 'inline'; 
            setTimeout(function(){document.getElementById('miss').style.display = 'none'}, 500);
            //alert('You missed');
        }
        slaying = false;
    }
}

document.getElementById('character').style.color = '#ccc';
document.getElementById('enemy').style.position = 'absolute';
document.getElementById('enemy').style.right = '0';
document.getElementById('game').style.position = 'relative';
document.getElementById('game').style.width = '1004px';
document.getElementById('characters').style.position = 'relative';
document.getElementById('health-container').style.right = '0';
document.getElementById('health-container').style.position = 'absolute';
document.getElementById('health-container').style.bottom = '30px';
document.getElementById('health-container').style.width = '200px';
document.getElementById('health-container').style.height = '41px';
document.getElementById('health').style.backgroundColor = 'red';
document.getElementById('health').style.height = '41px';
document.getElementById('health').style.width = '200px';
document.getElementById('miss').style.position = 'absolute';
document.getElementById('miss').style.right = '20px';
document.getElementById('miss').style.bottom = '120px';
document.getElementById('miss').style.display = 'none';
document.getElementById('hit').style.position = 'absolute';
document.getElementById('hit').style.right = '20px';
document.getElementById('hit').style.bottom = '120px';
document.getElementById('hit').style.display = 'none';
var slaying = true;
var youHit = Math.floor(Math.random() * 6 + 1);
var totalDamage = 0;
var damageThisRound = Math.floor(Math.random() * 4 + 1);
var num = document.getElementById('health').style.width.length - 2;
var health = document.getElementById('health').style.width;
health = health.substring(0, num);
attack();

Answer 1

I found the answer in the end. I used this instead of using the onclick method:

document.getElementById('attack').addEventListener('click', function() {
    myfunction();
}, false);