Как отлаживать \ компилировать \ находить ошибки в моем JavaScript-коде в файле 'script.js' в VS Code? - PullRequest
Новая
       29

Как отлаживать \ компилировать \ находить ошибки в моем JavaScript-коде в файле 'script.js' в VS Code?

0 голосов
/ 10 мая 2019

Я начинаю с веб-разработки.Я знаю основы HTML и JavaScript. Я работаю с VS Code.Проблема, с которой я сталкиваюсь, заключается в том, что я не могу определить ошибки в своем коде JavaScript, который я написал в файле «script.js».Ошибки варьируются от пропуска точки с запятой до других концептуальных ошибок.

Единственное решение, которое до сих пор работало для меня, - запуск кода во внешнем компиляторе JavaScript, например на https://js.do/. Каждый раз, когда я копируюВставьте код, чтобы проверить ошибки.Я пытался искать VS Code Extensions.Я наткнулся на «Отладчик для 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, но это не помогло.

1 Ответ

0 голосов
/ 10 мая 2019

Вот ответ на ваш вопрос:

Как быстро протестировать код JavaScript?

Ниже приведен бесплатный список инструментов, которые вы можете использовать для проверки, тестирования и проверки вашего кода JS:

Google Code Playground Песочница JavaScript jsbin jsfiddle Pastebin jsdo.it поджигатель html5snippet.net

Надеюсь, это поможет.

Редактировать: опечатка

...