javascript - HTML JavaScript document.getElementById
问题描述
首先，当您阅读这篇文章时，我的英语不太好，对不起。
最近我遇到了一个问题，我尝试从按钮中获取表 ID，将 ID 发送到函数进行比较。在函数中，我创建了一个数组来存储表 ID。但我无法成功比较 Id 使用的数组或字符串。
有人可以教我如何解决或做这件事吗？
这是我的代码 HTML：
HTML
JS: JavsScrpit
var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];
function displaySetting(id) {
/*var tabID = document.getElementById(id);*/
/*if(document.getElementById(id)==arrTabID[0])*/
if (document.getElementById(id) == "tSec1") {
if (document.getElementById(id).style.display == "none") {
doucment.getElementById(id).style.display == "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
/*if(document.getElementById(id)==arrTabID[1])*/
else if (document.getElementById(id) == "tSec2") {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id]).style.display = "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
/*if(document.getElementById(id)==arrTabID[2])*/
else if (document.getElementById(id) == "tSec3") {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = "block";
var i;
for (i = 0; i < 7; i++) {
if (i != 0) {
document.getElementById(id).style.display = "none";
}
}
} else {
document.getElementById(id).style.display = "block";
}
}
}<table class="table-content">
<tbody>
<!--Section 1-->
<div>
<table id="tSec1" name="NtSec1" style="display:block;" height="450px">
<tbody>
<tr>
<td style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media1.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 1.</h3>
</td>
</tr>
<tr>
<td>
<h3> 2.</h3>
</td>
</tr>
<tr>
<td>
<h3> 3. </h3>
</td>
</tr>
<tr>
<td>
<h3> 4. </h3>
</td>
</tr>
<tr>
<td>
<h3> 5.</h3>
</td>
</tr>
<tr>
<td>
<h3>§.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 2-->
<div>
<table id="tSec2" name="NtSec2" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media2.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 6.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 7.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 8.</h3>
</td>
</tr>
<tr>
<td>
<h3>§ </h3>
</td>
</tr>
<tr>
<td>
<h3> 9.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 3-->
<div>
<table id="tSec3" name="NtSec3" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media3.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 10.</h3>
</td>
</tr>
<tr>
<td>
<h3> 11.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 12.</h3>
</td>
</tr>
<tr>
<td>
<h3> 13.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 4-->
<div>
<table id="tSec4" name="NtSec4" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media4.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 14.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 15.</h3>
</td>
</tr>
<tr>
<td>
<h3> 16.</h3>
</td>
</tr>
<tr>
<td>
<h3> 17.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 5-->
<div>
<table id="tSec5" name="NtSec5" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media5.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 18.</h3>
</td>
</tr>
<tr>
<td>
<h3> 19.</h3>
</td>
</tr>
<tr>
<td>
<h3> 20. </h3>
</td>
</tr>
<tr>
<td>
<h3> 21.</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 6-->
<div>
<table id="tSec6" name="NtSec6" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media6.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 22.</h3>
</td>
</tr>
<tr>
<td>
<h3> § </h3>
</td>
</tr>
<tr>
<td>
<h3> 23.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 24.</h3>
</td>
</tr>
<tr>
<td>
<h3> 25. </h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 7-->
<div>
<table id="tSec7" name="NtSec7" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media7.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 26.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 27.</h3>
</td>
</tr>
<tr>
<td>
<h3> 28.</h3>
</td>
</tr>
<tr>
<td>
<h3> 29.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>Page</h1>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button>
</div>
</tbody>
</table>感谢您的帮助。最良好的问候。
解决方案
你比较一个 HTML 对象和一个字符串。
if(document.getElementById(id)=="tSec1")
改为使用if(id == 'tSec1')。
然后有一个错字
document.getElementById(id]).style.display = "block";
你的循环什么也不做。
如果您希望函数将显示设置为阻止具有给定 id 的元素并将所有其他元素设置为不显示，您可以这样做：
var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];
function displaySetting(id) {
var tabID;
var index = arrTabID.indexOf(id); // index of given id in array arrTabID
for (var i = 0; i < arrTabID.length; i += 1) {
tabID = document.getElementById(arrTabID[i]); // for ids in arrTabID
if (i == index) {
tabID.style.display = 'block';
} else {
tabID.style.display = 'none';
}
}
}<table class="table-content">
<tbody>
<!--Section 1-->
<div>
<table id="tSec1" name="NtSec1" style="display:block;" height="450px">
<tbody>
<tr>
<td style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media1.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 1.</h3>
</td>
</tr>
<tr>
<td>
<h3> 2.</h3>
</td>
</tr>
<tr>
<td>
<h3> 3. </h3>
</td>
</tr>
<tr>
<td>
<h3> 4. </h3>
</td>
</tr>
<tr>
<td>
<h3> 5.</h3>
</td>
</tr>
<tr>
<td>
<h3>§.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 2-->
<div>
<table id="tSec2" name="NtSec2" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media2.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 6.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 7.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 8.</h3>
</td>
</tr>
<tr>
<td>
<h3>§ </h3>
</td>
</tr>
<tr>
<td>
<h3> 9.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 3-->
<div>
<table id="tSec3" name="NtSec3" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;"><br>
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="50" width="50">
<audio controls>
<source src="../sound/media_1/media3.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 10.</h3>
</td>
</tr>
<tr>
<td>
<h3> 11.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 12.</h3>
</td>
</tr>
<tr>
<td>
<h3> 13.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 4-->
<div>
<table id="tSec4" name="NtSec4" style="display:none;" height="450px">
<tbody>
<tr>
<td class="hidden-phone" style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media4.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 14.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 15.</h3>
</td>
</tr>
<tr>
<td>
<h3> 16.</h3>
</td>
</tr>
<tr>
<td>
<h3> 17.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 5-->
<div>
<table id="tSec5" name="NtSec5" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media5.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 18.</h3>
</td>
</tr>
<tr>
<td>
<h3> 19.</h3>
</td>
</tr>
<tr>
<td>
<h3> 20. </h3>
</td>
</tr>
<tr>
<td>
<h3> 21.</h3><br></td>
</tr>
</tbody>
</table>
</div>
<!--Section 6-->
<div>
<table id="tSec6" name="NtSec6" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media6.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 22.</h3>
</td>
</tr>
<tr>
<td>
<h3> § </h3>
</td>
</tr>
<tr>
<td>
<h3> 23.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 24.</h3>
</td>
</tr>
<tr>
<td>
<h3> 25. </h3>
</td>
</tr>
</tbody>
</table>
</div>
<!--Section 7-->
<div>
<table id="tSec7" name="NtSec7" style="display:none;" height="450px">
<tbody>
<tr>
<td style="text-align:left;">
<img src="../pic/voiceIcon.png" alt="voiceIcon" height="55" width="55">
<audio controls>
<source src="../sound/media_1/media7.mp3" type="audio/mpeg">
</audio>
</td>
</tr>
<tr>
<td>
<h3> 26.</h3>
</td>
</tr>
<tr>
<td>
<h3>§</h3>
</td>
</tr>
<tr>
<td>
<h3> 27.</h3>
</td>
</tr>
<tr>
<td>
<h3> 28.</h3>
</td>
</tr>
<tr>
<td>
<h3> 29.</h3>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>Page</h1>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>
<button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button>
</div>
</tbody>
</table>推荐阅读
- javascript - 在特定频道 Discord.js 中发送错误
- liferay - 如何为 Liferay DXP JSON 远程服务实现 Token auth？
- r - Plotly 不绘制非二次曲面
- javascript - 并行 div 滚动
- python - 是否有可能获得一个使用 tkinter 在使用烧瓶的网页中运行的 python 程序？
- google-bigquery - 维护/设置写入截断计划查询的列描述
- r - 如何将“预测”线添加到现有的 ggplot 而不按前一个 ggplot 的组着色？
- spring-mvc-test - Spring MVC 控制器测试失败，主体为空
- string - 如果我尝试按字符打印字符串，则出现分段错误
- asynchronous - 在jsf表单提交的后台运行任务