Question

我的HTML文件如下所示：sof.html＆amp;一个javascript文件sofjs.js，我在HTML＆amp;从HTML中调用onload（）中的函数。下面的代码片段。

但是，我注意到只显示了HTML内容，而不是我在javascript的功能中包含的数据。使用javascript＆＃34; innerHTML＆＃34;我想显示内容。

我对HTML＆amp; amp; javascript＆amp;第一次尝试这个。所以请对我很轻松。

HTML code：

<!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>

Javascript文件：

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> ";
}

Answer 1

正如@Jon Uleis所说，你不能在js字符串里面换行

    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> ';

<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><div id="batch1"style="display: block; " name="batch1">Select these </div><br>
<div id = "batch2" style = "display: none">

</div><div id="batch1" style="display: block; " name="batch2">Select these </div><br>
<div id = "batch3" style = "display: none">

</div><div id="batch1"style="display: block; " name="batch3">Select these</div><br>
</div>
</div>
<div id="batch1">
</div>

无法从HTML代码调用javascript函数

1 个答案: