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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 4434 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 条回复 • 1970-01-01 08:00:00 +08:00

icyflash

2012-03-27 17:39:22 +08:00

切到 console

binarymann

2012-03-27 17:44:18 +08:00

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

lackrp

2012-03-27 17:47:37 +08:00

jiyinyiyong

2012-03-27 17:48:47 +08:00

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

icyflash

2012-03-27 17:49:27 +08:00

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

icyflash

2012-03-27 17:54:59 +08:00

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

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

binarymann

2012-03-27 17:56:24 +08:00

@lackrp
@jiyinyiyong
@icyflash

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

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

jiyinyiyong

2012-03-27 18:05:01 +08:00

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

zephyro

2012-03-27 18:10:31 +08:00

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

gDD

2012-03-27 18:12:16 +08:00

@zephyro 看一楼。

cmonday

2012-03-27 18:15:14 +08:00

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

cmonday

2012-03-27 18:17:29 +08:00

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

icyflash

2012-03-27 18:26:48 +08:00

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

reus

2012-03-27 18:34:53 +08:00

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

reus

2012-03-27 18:35:47 +08:00

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

Livid

MOD

2012-03-27 19:21:36 +08:00

http://getfirebug.com/

leecade

2012-03-27 19:29:59 +08:00

呵呵，来吓吓你：

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

iwege

2012-03-27 19:32:36 +08:00

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