JavaScript不输出任何值

时间:2015-02-02 20:04:34

标签: javascript html

最近我开始学习使用HTML的JavaScript。我想为我正在使用的游戏创建一个简单的计算器。你选择一种矿石类型,小行星留下的矿石数量,每个周期开采的价值,以及一个周期的持续时间,并且该脚本应该返回要开采的矿石量和所需的周期数。以及他们的总持续时间。

我已经尝试了几件事,比如在try语句中包含该函数,但这也无效。我正在寻求你的帮助,试图弄清楚我做错了什么,并以正确的方式指出我。提前谢谢。

<html>
<head>
    <title>Mining Calculator - IndX: Industry Extension</title>
    <script type="text/javascript">     
        function oreCalc() {
        var ore = document.getElementById("ores").value;
        var volume;
        var amount = document.getElementById("amnt").value;
        var yield = document.getElementById("yield").value;
        var cycle = document.getElementById("cycle").value;
        try{
            switch(ore){
                case "veldspar":
                    volume = 0.1;
                    break;
                case "scordite":
                    volume = 0.15;
                    break;
                case "pyroxeres":
                    volume = 0.3;
                    break;
                case "plagioclase":
                    volume = 0.35;
                    break;
                case "omber":
                    volume = 0.6;
                    break;
                case "kernite":
                    volume = 1.2;
                    break;
                case "jaspet":
                    volume = 2;
                    break;
                case "hemorphite":
                    volume = 3;
                    break;
                case "gneiss":
                    volume = 5;
                    break;
                case "dark_ochre":
                    volume = 8;
                    break;
                case "spodumain":
                    volume = 16;
                    break;
                case "crokite":
                    volume = 16;
                    break;
                case "arkonor":
                    volume = 16;
                    break;
                case "mercoxit":
                    volume = 40;
                    break;
            }
            var rockvolume = amount * volume;
            var cycles = rockvolume / yield;
            var seconds = cycles * cycle;
            var minutes;
            while(seconds > 60)
            {
                seconds -= 60;
                minutes++;
            }
            var text = "The asteroid has " + rockvolume + " m3 of ore. \n You'll mine it in " + Math.ceil(cycles) +
             "  cycles. \n It will take you " + minutes + "min " +   Math.ceil(seconds) "s to mine.";
            document.getElementById("output").innerHTML = text;
            }
            catch(err){
                var text = "Input all required fields";
                document.getElementById("output").innerHTML = text;
            }
        }
    </script>
</head>
<body>
    <table><tr><td>Ore:</td><td>
        <select name="ores" id="ores" onchange="oreCalc()"> 
            <option value="veldspar">Veldspar</option>
            <option value="scordite">Scordite</option>
            <option value="pyroxeres">Pyroxeres</option>
            <option value="plagioclase">Plagioclase</option>
            <option value="omber">Omber</option>
            <option value="kernite">Kernite</option>
            <option value="jaspet">Jaspet</option>
            <option value="hemorphite">Hemorphite</option>
            <option value="gneiss">Gneiss</option>
            <option value="dark_ochre">Dark Ochre</option>
            <option value="spodumain">Spodumain</option>
            <option value="crokite">Crokite</option>
            <option value="arkonor">Arkonor</option>
            <option value="mercoxit">Mercoxit</option>
        </select></td><td rowspan="4"><p id="output"></p></td></tr>
        <tr><td>Amount:</td><td> 
            <input type="number" name="amount" id="amnt" oninput="oreCalc()">
        </td></tr>
        <tr><td>Yield:</td><td>
            <input type="number" name="yield" id="yield" oninput="oreCalc()">
        </td></tr>
        <tr><td>Cycle duration:</td><td><input type="number" name="cycle" id="cycle" oninput="oreCalc()"></td></tr>
    </table>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

要跟踪使用浏览器错误控制台所需的这些问题。

  • 在Firefox的菜单中 - &gt;开发者 - &gt; Web控制台
  • 在Chrome中它的菜单 - &gt;更多工具 - &gt; Javascript控制台
  • 在IE浏览器中,我认为你点击了F12点击控制台。

我使用的是Firefox,我在您的页面上看到以下错误:

SyntaxError: missing ; before statement     ore.html:66

如果你去第66行,你会看到:

&#13;
&#13;
var text = "The asteroid has " + rockvolume + " m3 of ore. \n You'll mine it in " + Math.ceil(cycles) +
             "  cycles. \n It will take you " + minutes + "min " +   Math.ceil(seconds) "s to mine.";
&#13;
&#13;
&#13;

注意缺少的&#34; +&#34;在Math.ceil(秒)之后但是在我的之前。&#34;?添加加号,它现在应该可以工作。

顺便说一下,将外部文件用于Javascript通常会更好。我发现它可以更轻松地管理和追踪问题。