JavaScript不能在HTML文件中工作

-1

尽管在JSFiddle中测试成功，但当我尝试在浏览器中启动html时，下面的代码不起作用。JavaScript不能在HTML文件中工作

从本质上讲，它是一个时间表，它根据table1的值将GMT时间更新为表格2中的GMT -7时间。

这里的HTML：

<html> 
<head> 
<script type="text/javascript" src="js/rtm.js" ></script> 
</head> 
<body> 
<table width=600px id="mytable1"> 
<tr> 
    <td>GMT</td> 
    <td>Monday</td> 
    <td>Tuesday</td> 
    <td>Wednesday</td> 
    <td>Thursday</td> 
    <td>Friday</td> 
</tr> 
<tr> 
    <td>Person A</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
</tr> 
<tr> 
    <td>Person B</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
</tr> 
</table> 
<table width=600px id="mytable2"> 
<tr> 
    <td>GMT-7</td> 
    <td>Monday</td> 
    <td>Tuesday</td> 
    <td>Wednesday</td> 
    <td>Thursday</td> 
    <td>Friday</td> 
</tr> 
<tr> 
    <td>Person A</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
</tr> 
<tr> 
    <td>Person B</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
    <td>17:00 - 01:30</td> 
    <td>09:00 - 17:30</td> 
</tr> 
</table> 
</body> 
</html>

...和JS：

var t1 = document.getElementById('mytable1'); 
var t2 = document.getElementById('mytable2'); 

for (x = 1; x <= 7; x++) { //Loop through the days(columns)   

for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows) 
    var cell1 = t1.rows[y].cells[x].innerHTML; 
    var start = cell1.split(' - ')[0]; 
    var stop = cell1.split(' - ')[1]; 
    var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]); 
    var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]); 
    var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes()); 
    var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes()); 
    t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes(); 
    } 
}

来源

2014-02-12 shennis90

你就可以用提供的不是“下不工作”会发生什么更好的描述。它什么都不做？ JS控制台是否有错误？ – Thor84no

这是因为加载DOM之前执行脚本。包装你的js代码里面onload功能是这样的：

window.onload= function(){ 

    var t1 = document.getElementById('mytable1'); 
    var t2 = document.getElementById('mytable2'); 

    for (x = 1; x <= 7; x++) { //Loop through the days(columns)   

    for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows) 
     var cell1 = t1.rows[y].cells[x].innerHTML; 
     var start = cell1.split(' - ')[0]; 
     var stop = cell1.split(' - ')[1]; 
     var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]); 
     var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]); 
     var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes()); 
     var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes()); 
     t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes(); 
     } 
    } 
}

来源

2014-02-12 13:16:24 Navin

感谢您的支持，完美的工作 – shennis90

我能想到的唯一理由是你的JS代码执行时发生的DOM建立之前。如果你使用的是jquery，把你的代码放在$（document）.ready（handler）中，否则navin的答案也会起作用。

$(document).ready(function(){ 
    var t1 = document.getElementById('mytable1'); 
    var t2 = document.getElementById('mytable2'); 
    for (x = 1; x <= 7; x++) { //Loop through the days(columns)   
    for (y = 1; y < t1.rows.length; y++) { //Loop through the people(rows) 
     var cell1 = t1.rows[y].cells[x].innerHTML; 
     var start = cell1.split(' - ')[0]; 
     var stop = cell1.split(' - ')[1]; 
     var starttime = new Date('', '', '', start.split(':')[0], start.split(':')[1]); 
     var stoptime = new Date('', '', '', stop.split(':')[0], stop.split(':')[1]); 
     var starttime2 = new Date('', '', '', starttime.getHours() - 7, starttime.getMinutes()); 
     var stoptime2 = new Date('', '', '', stoptime.getHours() - 7, stoptime.getMinutes()); 
     t2.rows[y].cells[x].innerHTML = ((starttime2.getHours() < 10) ? "0" : "") + starttime2.getHours() + ':' + ((starttime2.getMinutes() < 10) ? "0" : "") + starttime2.getMinutes() + ' - ' + ((stoptime2.getHours() < 10) ? "0" : "") + stoptime2.getHours() + ':' + ((stoptime2.getMinutes() < 10) ? "0" : "") + stoptime2.getMinutes(); 
     } 
    } 
});

结帐的jQuery文档了解更多信息http://api.jquery.com/ready/

来源

2014-02-12 13:26:03

感谢您的链接，对新手有很好的帮助！ – shennis90

JavaScript不能在HTML文件中工作

回答

相关问题