无法从HTML代码调用javascript函数_Javascript_Html_Dom Events_Onload

无法从HTML代码调用javascript函数

javascript html

无法从HTML代码调用javascript函数,javascript,html,dom-events,onload,Javascript,Html,Dom Events,Onload,我有一个如下所示的html文件sof.html和一个Javascript文件sofjs.js，我正在html中导入它&从html中调用中的onload（）中的函数。下面是代码片段但是，我注意到只显示HTML内容，而不是Javascript函数中包含的数据。使用Javascript的innerHTML我想显示内容我对HTML和Javascript非常陌生，并且是第一次尝试。所以请对我宽容点 HTML代码： <!DOCTYPE html> <html> <he

我有一个如下所示的html文件sof.html和一个Javascript文件sofjs.js，我正在html中导入它&从html中调用

中的

onload（）

中的函数。下面是代码片段

但是，我注意到只显示HTML内容，而不是Javascript函数中包含的数据。使用Javascript的

innerHTML

我想显示内容

我对HTML和Javascript非常陌生，并且是第一次尝试。所以请对我宽容点

HTML代码：

<!DOCTYPE html>
 <html>
 <head>
 <meta charset = "UTF - 8">
 <style> thead { color: black;} tbody {  color: blue; } table, th, td { border: 1px solid black; } </style>
 <title>SOmeTitle</title>
 <script type="text / javascript">
 function activateTab(pageId) {var tabCtrl = document.getElementById('tabCtrl');var pageToActivate = document.getElementById(pageId);for (var i = 0; i < tabCtrl.childNodes.length; i++) {var node = tabCtrl.childNodes[i];if (node.nodeType == 1) {node.style.display = (node == pageToActivate) ? 'block' : 'none';}}}
 </script> 

 <script src ="batch1.js"type="text/javascript"> </script>
 <script src ="batch2.js"type="text/javascript"> </script> 
 <script src ="batch3.js"type="text/javascript"> </script>
 <script type="text/javascript"> function loadAll(){ batch1()}<!--;batch2();batch3(); -->}</script>
 </head>
 <body onload="loadAll()">
 "<h1 align="center"> SOmeTitle120.0</h1>
 <h3 align="right">Log Capture Time =Sat Aug 19 22:34:53 2017</h3>
<h3 align="left">IP Address = 127.0.0.1</h3>

<div id = "header">
<ul>
<li><a href = "javascript:activateTab('batch1')"id ="tb1">batch1</a></li>
<li><a href = "javascript:activateTab('batch2')"id ="tb1">batch2</a></li>
<li><a href = "javascript:activateTab('batch3')"id ="tb1">batch3</a></li>
</ul>
</div>

<div id="content">
<div id="tabCtrl">
<div id = "batch1" style = "display: block<div id="batch1"style="display: block; " name="batch1"><br>Select these</br> </div>
<div id = "batch2" style = "display: none<div id="batch1"style="display: block; " name="batch2"><br>Select these</br> </div>
<div id = "batch3" style = "display: none<div id="batch1"style="display: block; " name="batch3"><br>Select these</br></div>
</div>
</div>
</body>
</html>

function batch1 () {
    document.getElementById('batch1').innerHTML = " 
    <ul><li><a href = "#Applications">Applications</a></li></ul> 
    <ul><li><a href = "#2ndTableApplications">2ndTableApplications</a></li></ul>
    <a name = "Applications"></a>
    <br />
    <h1> 
    <center>Applications</h1> <center> <br /> <br /> <br />
    <table border="1" style="width:300px">
    <tr> <th><b><center>Apps_1</center></b></th></tr>
    <thead> 
    <tr><th>Sl NO</th><th>Appname</th><th>appver</th></tr>
    </thead>
    <tbody>
    <tr><th>1</th><th>Visual studio</th><th>13.5</th></tr>
    <tr><th>2</th><th>Android studio</th><th>11.5</th></tr>
    <tr><th>3</th><th>notepad</th><th>17</th></tr>
    <tr><th>4</th><th>notepad++</th><th>87</th></tr>
    <tr><th>1</th><th>Visual studio</th><th>13.5</th></tr>
    <tr> <th><b><center>Apps_2<center><b></th></tr>
    <tr><th>5</th><th>Visual studio</th><th>13.5</th></tr>
    <tr><th>6</th><th>Android studio</th><th>11.5</th></tr>
    <tr><th>7</th><th>xmlwriter</th><th>17</th></tr>
    <tr><th>8</th><th>notepad++</th><th>87</th></tr>
    </table>
    <a name = "2ndTableApplications>"</a>
    <br /> 
    <h1> <center>2ndTableApplications</h1>
    <center> 
    <br /> <br /> <br />
    <table border="1" style="width:300px">
    <tr> <th><b><center>MSapps<center><b></th></tr>
    <thead> 
    <tr><th>MS Sl NO</th><th>MSAppname</th><th>MSappver</th></tr>
    </thead>
    <tbody>
    <tr><th>m1</th><th>MSapp1</th><th>13.5</th></tr>
    <tr><th>m2</th><th>msapp2</th><th>11.5</th></tr>
    <tr><th>m3</th><th>msapp3</th><th>17</th></tr>
    <tr><th>m4</th><th>msapp4</th><th>87</th></tr> ";
}


thead{color:black；}tbody{color:blue；}表，th，td{边框：1px纯黑；}
某物名称
函数activateTab（pageId）{var tabCtrl=document.getElementById（'tabCtrl'）；var pageToActivate=document.getElementById（pageId）；for（var i=0；i




正如@Jon Uleis所说，js字符串中不能有换行符

document.getElementById（'batch1'）.innerHTML='




选择这些

选择这些

选择这些

尝试将函数loadAll（）{batch1（）}}
移动到正文
的末尾。也就是说，就在关闭`~之前，我立即看到了一些东西：（1）
你没有ID为“Software”的元素供你的JS使用。（2）
你没有调用你的软件（）
JS函数在任何地方都可以运行，因此它永远不会运行。（3）
如果不连接多行，JS字符串（您的innerHTML）中就不能有换行符。（4）
您的JS字符串中有引号，即使没有换行符，也会有效地结束字符串。将它们更改为单引号。@Lal:但我在中使用了loadAll（）。因此，如果我在末尾添加loadAll（）定义，它将如何工作？@Lal:它不工作。我尝试了。输出没有更改。您的浏览器控制台中有错误吗？？