Javascript Squarespace click() function not working

Question

The below code is not working on Squarespace. The tabs are showing up fine, clicking on them works just fine, I just can't get the last line of javascript to function that loads one of the tabs a default.

I have injected the HTML as a codeblock ,the JS in the header, and the css in the custom css section. I am a bit lost on how to get it to work, it works in the console here no problem.

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<div class="tab">
  <button class="tablinks"  onclick="openCity(event, 'Buy')"> Find a Home</button>
  <button id= "defaultOpen" class="tablinks" onclick="openCity(event, 'Sell')"> Sell Your Home</button>
</div>

<div id="Buy" class="tabcontent">
  <h2>Let Us Help You Find Your New Home in Our "Island" Paradise</h2>
  <a class="landing-button" href="https://westseattlerealty.idxbroker.com/i/west-seattles-latest-listings">Search West Seattle's Latest Listings</a>
</div>

<div id="Sell" class="tabcontent">
  <h2>Get an Expert Opinion from a Trusted Neighbor & West Seattle's Foremost Real Estate Experts</h2>
  <a class="landing-button" href="https://westseattlerealty.idxbroker.com/i/west-seattles-latest-listings">Request a Personalized Competitive Market Analysis</a>
</div>

you should call your script after loading the html page, try by calling the script in the end of the body of the html — Ankush Sharma, Oct 26 '18 at 22:29
Most likely it's this problem: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Barmar, Oct 26 '18 at 22:30
So it looks like it is because the element wasn't loaded yet in the DOM. I am trying to add the Jquery to do so however I am still not getting it to add. I am trying to put it in like this: — Rory Broves, Oct 26 '18 at 22:50

score 0 · Answer 1 · answered Oct 26 '18 at 23:09

Thank you Bramar, you were correct. The javascript was injected into the header and the HTML codeblock was below. The DOM had not loaded the element yet so it was not finding the element with ID defaultOpen.

I Had to move the small piece of javascript: document.getElementById("defaultOpen").click();

to the footer and it worked right away. Thank you so much!

Javascript Squarespace click() function not working

1 Answers1