gpt4 book ai didi

javascript - 如何在VS Code中的 'script.js'文件中的JavaScript代码中调试\编译\查找错误?

转载 作者:行者123 更新时间:2023-12-02 10:57:45 24 4
gpt4 key购买 nike

我从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中是否出现任何错误,但这没有帮助。

最佳答案

这是您的问题的答案:

How to quickly test some javascript code?

Following is a free list of tools you can use to check, test and verify your JS code:

Google Code Playground JavaScript Sandbox jsbin jsfiddle pastebin jsdo.it firebug html5snippet.net

Hope this helps.



编辑:错别字

关于javascript - 如何在VS Code中的 'script.js'文件中的JavaScript代码中调试\编译\查找错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56077029/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com