为什么 defaultOpen 可以在我的代码模拟器上运行，而不能在我的网站上运行？

Question

I'm trying to have a group of tabs, the first of which should be automatically clicked when the page loads. I copied and pasted the line of Javascript directly from w3schools to try it out, and it worked on a code simulator, but now that I put it into the website I'm building, for some reason nothing is clicked when it loads, which makes it look terrible.

Here are the parts of the code I used that I think are relevant:

document.getElementById("defaultOpen").click();

function openTab(evt, tabName, boxName) {    
var i, tabcontent, tablinks;

var box = document.getElementById(boxName);

tabcontent = box.getElementsByClassName("sg-tab-content");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

tablinks = box.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
}

document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " sg-current";
}

And:

 <div class="code-tabs"> <button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button> <button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button> <button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button> <button class="tablinks" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button> <button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button> <div class="spacer"></div> </div> <pre id="disp-Deck" class="sg-tab-content"> <p><mark>Deck!</mark></p> </pre>

EDIT: Took down the website link because the problem got solved and now I want to keep working on my site :)

The whole code is a work-in-progress by someone relatively new to this, so excuse the design flaws. I just feel like I followed every instruction I could find, and it still isn't working. Any ideas?

Answer 1

Looking at your site I can see that the order in which code is laid out probably needs adjustment.

There are two things I spotted:

• the Javascript creating the click is run potentially before the relevant HTML has been loaded (if this is the case you should see an error in your browser's dev tools console)

• the style element is loaded within the body element (it should be in the head element)

The first of these may be your problem, but I was not able to test it (I did not experience the problem, but that could be due to the way my server works).

Here is the rearranged code as a snippet which you can run:

 function openTab(evt, tabName, boxName) { var i, tabcontent, tablinks; var box = document.getElementById(boxName); tabcontent = box.getElementsByClassName("sg-tab-content"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = box.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" sg-current", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " sg-current"; } document.getElementById("defaultOpen").click();

 pre { background-color: lightgrey; border: 1px solid blue; margin-top: 0; margin-bottom: 20px; font-family: Consolas, Monaco, monospace; width: 100%; height: 40px; box-sizing: border-box; position: relative; z-index: 1; text-align: center; } button { cursor: pointer; border: none; width: 100%; display: inline-block; color: grey; text-align: center; transition: .25s ease; border-radius: 12px 12px 0 0; } h1 { text-align: center; margin: 10px; } p { position: relative; bottom: 25px; } div.code-tabs { display: -webkit-flex; display: flex; width: 100%; text-align: center; } div.code-tabs button { outline: none; background-color: lightgrey; margin-right: 4px; margin-bottom: -1px; text-align: center; color: grey; font-family: Consolas, Monaco, monospace; font-size: .875em; /*14px*/ height: 30px; border: 1px solid blue; width: 100%; } div.code-tabs button.sg-current { border-bottom: none !important; text-align: center; text-decoration: underline; font-size: 130%; font-family: Consolas, Monaco, monospace; } .sg-tab-content { display: none; text-align: center; display: flex; flex-wrap: wrap; align-content: center; } div.spacer { height: 24px; margin-bottom: -1px; flex: 3; text-align: center; }

 <h1> Testing center </h1> <div id="code-box-1"> <div class="code-tabs"> <button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button> <button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button> <button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button> <button class="tablinks sg-current" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button> <button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button> <div class="spacer"></div> </div> <pre id="disp-Deck" class="sg-tab-content" style="display: none;"> <p><mark>Deck!</mark></p> </pre> <pre id="disp-Hand" class="sg-tab-content" style="display: none;"> <p><mark>Hand!</mark></p> </pre> <pre id="disp-Field" class="sg-tab-content" style="display: none;"> <p><mark>Field!</mark></p> </pre> <pre id="disp-Graveyard" class="sg-tab-content" style="display: block;"> <p><mark>Graveyard!</mark></p> </pre> <pre id="disp-Banished" class="sg-tab-content" style="display: none;"> <p><mark>Banished!</mark></p> </pre> </div>

Here is the rearranged code for you to try on your server:

<html>
<head>
  <style>
    pre {
      background-color: lightgrey;
      border: 1px solid blue;
      margin-top: 0;
      margin-bottom: 20px;
      font-family: Consolas, Monaco, monospace;
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    button {
      cursor: pointer;
      border: none;
      width: 100%;
      display: inline-block;
      color: grey;
      text-align: center;
      transition: .25s ease;
      border-radius: 12px 12px 0 0;
    }

    h1 {
      text-align: center;
      margin: 10px;
    }

    p {
      position: relative;
      bottom: 25px;
    }

    div.code-tabs {
      display: -webkit-flex;
      display: flex;
      width: 100%;
      text-align: center;
    }

    div.code-tabs button {
      outline: none;
      background-color: lightgrey;
      margin-right: 4px;
      margin-bottom: -1px;
      text-align: center;
      color: grey;
      font-family: Consolas, Monaco, monospace;
      font-size: .875em;
      /*14px*/
      height: 30px;
      border: 1px solid blue;
      width: 100%;
    }

    div.code-tabs button.sg-current {
      border-bottom: none !important;
      text-align: center;
      text-decoration: underline;
      font-size: 130%;
      font-family: Consolas, Monaco, monospace;
    }

    .sg-tab-content {
      display: none;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }

    div.spacer {
      height: 24px;
      margin-bottom: -1px;
      flex: 3;
      text-align: center;
    }
  </style>
</head>
<body>

  <h1>
    Testing center
  </h1>
  <div id="code-box-1">
    <div class="code-tabs">
      <button class="tablinks" onclick="openTab(event, 'disp-Deck','code-box-1')" id="defaultOpen" style="background-color:#FF8B53">Deck</button>
      <button class="tablinks" onclick="openTab(event, 'disp-Hand','code-box-1')" style="background-color:#FF8B53">Hand</button>
      <button class="tablinks" onclick="openTab(event, 'disp-Field','code-box-1')" style="background-color:#FF8B53">Field</button>
      <button class="tablinks sg-current" onclick="openTab(event, 'disp-Graveyard','code-box-1')" style="background-color:#FF8B53">Graveyard</button>
      <button class="tablinks" onclick="openTab(event, 'disp-Banished','code-box-1')" style="background-color:#FF8B53">Banished</button>
      <div class="spacer"></div>
    </div>
    <pre id="disp-Deck" class="sg-tab-content" style="display: none;">        <p><mark>Deck!</mark></p>
    </pre>
    <pre id="disp-Hand" class="sg-tab-content" style="display: none;">        <p><mark>Hand!</mark></p>
    </pre>
    <pre id="disp-Field" class="sg-tab-content" style="display: none;">        <p><mark>Field!</mark></p>
    </pre>
    <pre id="disp-Graveyard" class="sg-tab-content" style="display: block;">        <p><mark>Graveyard!</mark></p>
    </pre>
    <pre id="disp-Banished" class="sg-tab-content" style="display: none;">        <p><mark>Banished!</mark></p>
    </pre>
  </div>
  <script type="text/javascript">

    function openTab(evt, tabName, boxName) {    
    var i, tabcontent, tablinks;

    var box = document.getElementById(boxName);

    tabcontent = box.getElementsByClassName("sg-tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = box.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" sg-current", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " sg-current";
    }
    
    
    document.getElementById("defaultOpen").click();
  </script>
</body>
</html>