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文件中工作

回答

相關問題