Javascript怎么能找出出错在哪里呢？

This topic created in 5184 days ago, the information mentioned may be changed or developed.

Javascript实在太不newbie-friendly了，照着书上写了个计算器，对着看了N遍没有一个错误但就是运行不起来，也不报错，打开chrome的developer tool切换到script标签啥都看不到...

作为第一门语言学习是不是得换门语言啊，譬如Python？

<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
td {
border: 1px solid gray;
width: 50px;
}
#results {
height: 20px;
}
</style>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="4" id="result"></td>
</tr>
<tr>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">+</a></td>
</tr>
<tr>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">-</a></td>
</tr>
<tr>
<td><a href="#">7</a></td>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td><a href="#">*</a></td>
</tr>
<tr>
<td><a href="#">Clear</a></td>
<td><a href="#">0</a></td>
<td><a href="#">=</a></td>
<td><a href="#">/</a></td>
</tr>
</table>
<script type="text/javascr ipt">
//using early dom event handlers
function addDigit(digit){
var resultField = document.getElementById("result");
resultField.innerHTML += digit;
return false;
}
function calculate(){
var resultField = document.getElementById("result");
resultField.innerHTML = eval(resultField.innerHTML);
return false;
}
function clear(){
var resultField = document.getElementById("result");
resultField.innerHTML = "";
return false;
}
function getHandlerFunction(innerHTML){
return function(){
addDigit(innerHTML);
return false;
};
}

onload = function() {
var links = document.getElementsByTagName("a");
var length = links.length;

for (var i = 0; i < length; i ++) {
var link = links[i];
var innerHTML = link.innerHTML;

switch(innerHTML) {
case "Clear":
link.onclick = clear;
break;
case "=":
link.onclick = calculate;
break;
default:
link.onclick = getHandlerFunction(innerHTML);
break;
}
}
};

</script>
</body>
</html>

href

24 replies • 1970-01-01 08:00:00 +08:00

icyflash

Mar 27, 2012

切到 console

binarymann

Mar 27, 2012

@icyflash 切到console了一片空白要如何调试呢？可以将我上面的代码全部复制粘贴到console里面运行不（貌似不行，刚试过了）

lackrp

Mar 27, 2012

jiyinyiyong

Mar 27, 2012

`<script type="text/javascr ipt">`中间去掉多余空格,, 然后我这边能运行了...
好像 HTML 当中的 script 不会显示到 script 里面的, 要单独文件才那个.
JS 感觉因为浏览器环境太复杂才有问题.. 换成 Node 的话感觉和 Python 至少入门不差太多..
如果有机会楼主来玩 CoffeeScript 吧..

icyflash

Mar 27, 2012

你这个是onload的原因，换成window.onload

icyflash

Mar 27, 2012

你代码没错，所以捕捉不到，只是按钮点击后没反应，你该考虑下是不是事件没绑定。

你用 onload，代码是没错的，但仅仅只是定义了一个函数，没将它绑定到对象上。

binarymann

Mar 27, 2012

@lackrp
@jiyinyiyong
@icyflash

感谢你们！怎么跑了个空格进去...但不报错的确太难找了...

@jiyinyiyong
coffeescript看起来很不错，但是还是需要js的背景知识才能学习吧？

jiyinyiyong

Mar 27, 2012

@binarymann JS 我比较菜, 只是玩的话 CoffeeScript 直接学也是可以的
另外, 比方说网上的文档基本是用 JS 写的, 那当然要熟悉 JS 啦才能懂了
先后顺序我没试过, 估计影响不大, 因为 coffee 本身也能当一门语言了
.. 就是不能浏览器直接 REPL 运行, 自己配环境入门的时候有点烦

zephyro

Mar 27, 2012

前几天使用vim+chrome开发html5小游戏，找着bug一个晚上晃晃悠悠地就过去了... ...各种alert加输出，最后总是超低级的无聊错误。
我记得有浏览器运行的时候会报错的，第几行第几个字符缺少定义什么的。
我的ie是有的，chrome和firefox是不是有插件可以辅助开发。

gDD

Mar 27, 2012

@zephyro 看一楼。

cmonday

Mar 27, 2012

@zephyro 你竟然用IE做前端开发，效率得有多低……

cmonday

Mar 27, 2012

Javascript在浏览器环境下会碰到很多意料之外的问题，确实不是很适合新手。不过如果LZ想学前端相关的知识，我倒是有一个建议，就是直接从学习jQuery开始入门

icyflash

Mar 27, 2012

呃，我弄错了，onload是可以的。一直用jquery，JS基础还是太差了。

reus

Mar 27, 2012

表……表格布局！
感觉这书不靠谱啊

reus

Mar 27, 2012

哦是计算器，我错了（脸红地匿

Livid

MOD

PRO

Mar 27, 2012

http://getfirebug.com/

leecade

Mar 27, 2012

呵呵，来吓吓你：

猜你不知道的JavaScript, Part I: operator
http://www.jsser.com/t/21

iwege

Mar 27, 2012

script为了减少错误，最好不要写type..或者是使用自动生成。
另外新版chrome的inspector很强，基本上等价于编辑器了，Scripts的tab，对于页面内嵌的script它可以抽出来作为单个script内容，也可以通过那个检查是否已经作为Script来执行了。同时也自带代码格式化工具，可以将任何恶心的代码格式化。