简单的HTML页面得到JS错误 - "SyntaxError: missing ; before statement"和"ReferenceError: calculateAdvantage is n



我是JS的新手,我在网上看过,但我仍然不确定为什么我会收到这些错误。我有一个索引.html和一个CSS工作表。JS似乎有问题,但我无法弄清楚为什么。

用户应该输入一些值,单击按钮,然后函数应该触发并对"result"div 元素进行更改。

索引.HTML

<html>
<head>
    <title>Out of Shield Options</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
    <h1>Out of Shield</h1>
    <div class="navbar">
        <ul>
            <li>Home</li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </div>
    <h2>Calculator</h2>
    <div id="inputInfo">
        <div class="inputLabel">
            <label>Hit Frame:</label><input type="text" class ="textField" id="hitFrame" class="inputs" value="0"></input>
        </div>
        <div class="inputLabel">
            <label>IASA Frame:</label><input type="text" class ="textField" id="iasaFrame" class="inputs" value="0"></input>
        </div>
        <div class="inputLabel">
            <label>Damage:</label><input type="text" class ="textField" id="damage" class="inputs" value="0"></input>
        </div>
        <div class="submit"><input id="calculateButton"type="button" value="Calculate!" onclick="calculateAdvantage()"></div>
        <div id="result"></div>
    </div>
    <script>
        calculateAdvantage(){
            var hitFrame = document.getElementById("hitFrame");
            var IASA = document.getElementById("iasaFrame");
            var damage = document.getElementById("damage");

            var shieldStun = (damage / 1.75) + 2;
            var result = IASA - hitFrame - shieldStun; 
            document.getElementById("calculateButton").innerHTML = result;
        }
    </script>

</body>
</html>

您必须将calculateAdvantage声明为函数:

function calculateAdvantage() {
    // Your code goes there
}

最新更新