错误：未捕获的类型错误：未定义不是函数

Question

我正在尝试制作一个 js 游戏，但是当我尝试使用onclick触发一个函数时，什么也没有发生，然后当我进入控制台时，每次单击它时都会出现此错误消息：

未捕获的类型错误：未定义不是函数

这就是我定义我的函数的方式：

var myfunction = function () {

我知道这与函数无关，尽管我在创建它之后调用它并且它工作正常。

我还通过在 onclick 中放置警报来检查它是否是点击，尽管效果很好。

我知道这是一个常见的问题，尽管看了其他人并没有发现任何问题。

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

我最终找到了答案。 我使用它而不是使用 onclick 方法：

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