HTML JavaScript document.getElementById

Question

First, my English not very well when you read this post, I'm sorry.

Recently I met one problem, I try to get table ID from buttons send the ID to function do compare. And in the function, I have created an Array to stored the table ID. But I can't successfully compare Id used array or string.

Can somebody teach me how to solve or do this thing?

Here is my code 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>&sect;.</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>&sect;</h3> </td> </tr> <tr> <td> <h3> 7.</h3> </td> </tr> <tr> <td> <h3>&sect;</h3> </td> </tr> <tr> <td> <h3> 8.</h3> </td> </tr> <tr> <td> <h3>&sect; </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>&sect;</h3> </td> </tr> <tr> <td> <h3> 12.</h3> </td> </tr> <tr> <td> <h3> 13.</h3> </td> </tr> <tr> <td> <h3>&sect;</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>&sect;</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> &sect; </h3> </td> </tr> <tr> <td> <h3> 23.</h3> </td> </tr> <tr> <td> <h3>&sect;</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>&sect;</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>&nbsp;&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button> </div> </tbody> </table>

Thank you for your help. Best regard.

Answer 1

You compare an HTML object and a string.

if(document.getElementById(id)=="tSec1")

Use if(id == 'tSec1') instead.

And then there is a typo in

document.getElementById(id]).style.display = "block";

and your loops do nothing.

If you want the function to set display to block for an element with given id and set all other elements to display none you could do it like this:

 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>&sect;.</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>&sect;</h3> </td> </tr> <tr> <td> <h3> 7.</h3> </td> </tr> <tr> <td> <h3>&sect;</h3> </td> </tr> <tr> <td> <h3> 8.</h3> </td> </tr> <tr> <td> <h3>&sect; </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>&sect;</h3> </td> </tr> <tr> <td> <h3> 12.</h3> </td> </tr> <tr> <td> <h3> 13.</h3> </td> </tr> <tr> <td> <h3>&sect;</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>&sect;</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> &sect; </h3> </td> </tr> <tr> <td> <h3> 23.</h3> </td> </tr> <tr> <td> <h3>&sect;</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>&sect;</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>&nbsp;&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec1')">1</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec2')">2</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec3')">3</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec4')">4</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec5')">5</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec6')">6</button>&nbsp; <button style="height:50px;width:50px;font-size:30px;" onclick="displaySetting('tSec7')">7</button> </div> </tbody> </table>

Answer 2

What I get from your post is.. you are trying to search in array of table id's, if exist you want to perform some action

you can do this by code given below.

var arrTabID = ["tSec1", "tSec2", "tSec3", "tSec4", "tSec5", "tSec6", "tSec7"];

function displaySetting(id) {
  var tabID = document.getElementById(id);
 debugger
  if (id == arrTabID.find(x=>x==id)) {
    if (tabID.style.display == "none") {
      tabID.style.display == "block";
      var i;
      for (i = 0; i < 7; i++) {
        if (i != 0) {
          tabID.style.display = "none";
        }
      }
    } else {
      tabID.style.display = "block";
    }
  }

}