I've encountered an issue with a web element I'm working on where the click function only triggers after the first click, rendering the initial click ineffective. Here's the code snippet in question:
HTML:
<div>
<a href="#0" class="packservice" id="rent">Rentals</a>
</div>
<div id="myDIV">
<div class="divinfo">
<div class="servicestxt">
<h2> Rentals </h2>
<hr>
<br>
<p>Rent professional beverage serving equipment for your next event. This is our self-serve option.</p><br>
<a href="#0" id="renBut"> Add to Quote </a>
</div>
</div>
</div>
CSS:
#myDIV {
display: none;
color: black;
padding: 2.5% 71.5% 1.5% 1%;
background-color: white;
}
a.packservice {
padding: 1% 97% 1% 1%;
background: gray;
opacity: 0.5;
font-family: 'Oswald', sans-serif;
font-weight: 900;
color: white;
margin-top: .25%;
display: block;
}
#packhead {
font-family: 'Oswald', sans-serif;
}
.divinfo {
width: 250%;
display: block;
background-color: white;
margin-left: 50%;
overflow: auto;
}
JavaScript:
var renBut = document.getElementById("renBut");
var rent = document.getElementById("rent");
function rentalStore() {
if (renBut.innerHTML=="Add to Quote"){
sessionStorage.setItem("rental", true);
renBut.innerHTML = "Remove from Quote"
} else {
sessionStorage.removeItem("rental");
renBut.innerHTML = "Add to Quote";
}
}
//Create function to hide rentals information div
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function clickDom() {
// Create event to listen for click and call corresponding function
console.log("Entering clickDom() function");
if (rent.addEventListener) {
rent.addEventListener("click", myFunction, false);
}
}
function buttonEl() {
if (renBut.addEventListener) {
renBut.addEventListener("click", rentalStore, false);
}
}
if (window.addEventListener) {
//call init() on page load
console.log("> Adding TC39 Event Listener...");
window.addEventListener ("load", buttonEl, false);
}
if (window.addEventListener) {
console.log("> Adding TC39 Event Listener...");
window.addEventListener ("load", clickDom, false);
}
I have also added it to a codepen at this link: https://codepen.io/seanbarker182/pen/maexPd
The Javascript here toggles the visibility of the related div when you click 'Rentals' initially, revealing the area containing the 'Add to Quote' button. Strangely enough, the first click seems to do nothing while subsequent clicks work as expected. Any insights into why this behavior occurs?