无法从 HTML 代码调用 javascript 函数
[英]Unable to call the javascript function from HTML code
问题描述
我有一个如下所示的 HTML 文件 sof.html 和一个 Javascript 文件 sofjs.js，我将其导入到 HTML 中并在 HTML 的<body onload>中的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>
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> ";
}
1 个解决方案
解决方案1
0 2017-08-20 07:09:27
正如@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>
无法从后面的代码调用JavaScript函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.