Question

我从Web开发开始。我知道HTML和JavaScript的基础知识。我正在使用VS Code。我面临的问题是我无法识别我在'script.js'文件中编写的JavaScript代码中的错误。错误的范围从遗漏分号到其他概念错误。

到目前为止，唯一对我有用的解决方案是在外部JavaScript编译器（例如https://js.do/）上运行代码。每次我复制粘贴代码以检查错误。我试图搜索VS代码扩展。我遇到了“ Chrome调试器”和“林特斯”。我尝试安装它们，但对我而言它们并没有多大意义。检查错误的正确方法是什么？什么是“调试器”和“林特”？

下面是我为SPI（学期性能指数）计算器编写的代码。

function calculate() {
    var arr1 = [];
    var arr2 = [];
    var totalscore = 0;
    for (var i = 1; i <= instance; i++) {
    arr1[i] = document.getElementById("GC" + i).value;
    arr2[i] = parseInt(document.getElementById("CC" + i).value);

    }


    for (var i = 1; i < arr1.length; i++) {
    totalscore += arr1[i] * arr2[i];
    }

    var message = "Dear " + document.getElementById("name").value + ",<br>" + "Your SPI is " + Math.round((totalscore / getSum(arr2)) * 100) / 100;
    var paraElement = document.createElement("p");
    paraElement.innerHTML = message;
    paraElement.id = "" + instance;
    var con = document.getElementById("result");
    con.appendChild(paraElement)
    //return false;

}

function getSum(arr) {
    var s = 0;

    for (var i = 1; i < arr.length; i++)
    s += arr[i];

    return s;

}
function Initial() {
    AddCourse();
    AddCourse();
    AddCourse();
}
var instance = 0;
function AddCourse() {
    instance++;
    var details = [
    { GRADE: "A*", GC: 10 },
    { GRADE: "A", GC: 10 },
    { GRADE: "B", GC: 8 },
    { GRADE: "C", GC: 6 },
    { GRADE: "D", GC: 4 },
    { GRADE: "E", GC: 2 },
    { GRADE: "F", GC: 0 }
    ];

    //Creating DropDown List Element
    var grade = document.createElement("SELECT");
    grade.id = "GC" + instance;

    //Adding Options to the Dropdown List
    for (var i = 0; i < details.length; i++) {
    var option = document.createElement("OPTION");
    option.innerHTML = details[i].GRADE;
    option.value = details[i].GC;
    grade.options.add(option);
    }
    //Creating number of credits input
    var credits = document.createElement("input");
    credits.setAttribute("type", "number");
    credits.id = "CC" + instance;
    credits.value = 0;

    //Creating Label elements
    var lab = document.createElement("label");
    lab.innerHTML = "COURSE " + instance + ":<br>";

    var lab2 = document.createElement("label");
    lab2.innerHTML = "GRADE: ";

    var lab3 = document.createElement("label");
    lab3.innerHTML = "  CREDITS: "

    var lab4 = document.createElement("br");

    //Referencing dvContainer
    var dvContainer = document.getElementById("dvContainer");

    //Adding Dropdown to Container
    var div = document.createElement("DIV");
    div.appendChild(lab);
    div.appendChild(lab2);
    div.appendChild(grade);
    div.appendChild(lab3);
    div.appendChild(credits);

    dvContainer.appendChild(div);
    dvContainer.appendChild(lab4);
    dvContainer.appendChild(lab4);

}

<html>

<head>
    <title> SPI Calculator</title>
    <script type="text/javascript" src="script.js"></script>
</head>

<body onload="Initial()">
    <form name="details">
        <div>
            <label for="names">Name:</label>
            <input type="text" id="name">
        </div>
        <br>
        <b>Enter Expected Grades</b>
        <br><br>
        <div id="dvContainer"></div>
        <input type="button" id="btnAdd" onclick="AddCourse()" value="Add Course" />

        <br><br>
        <div>
            <button type="button" onclick="calculate()">Submit</button> &nbsp; &nbsp;
            <button type="reset">Reset</button>
        </div>


    </form>
    <div id="result"></div>

</body>

</html>

结果没有显示任何错误，并且代码无法正常运行。我试图从中删除分号第23行：con.appendChild（paraElement），看看VS Code是否出现任何错误，但没有帮助。

Answer 1

这是您问题的答案：

How to quickly test some javascript code?

以下是免费的工具列表，可用于检查，测试和验证JS代码：

Google Code Playground      JavaScript沙箱      jsbin      jsfiddle      糊盒      jsdo.it      萤火虫      html5snippet.net

希望这会有所帮助。

编辑：错字

如何在VS Code中的“ script.js”文件中的JavaScript代码中调试\编译\查找错误？

1 个答案: