I'm trying to automate a voting system with a check if voting exist sorta. The DOM retrive the ID of a shortcode and then the script do a loop to find the exact ID. Then if one shortcode is activated it proceed else if the id of the shortcode is undefined it show a message. I checked the script with a static way and it works, but when I try to make it dynamic there's something that doesn't work. I'm a beginner so maybe it's a dumb error.
for (i = 1; i < 4; i++) {
//Getting the element using document.getElementById
var GravityFormCheck = document.getElementById("[id*='gform_wrapper_" + i+ "']")
//If it isn't "undefined" and it isn't "null", then it exists.
if(typeof(GravityFormCheck) != 'undefined' && GravityFormCheck != null ){
console.log('there are votes in progress');
} else{
//Show the message and hide the div of the shortcode
document.getElementById("noVoting").hidden = false;
document.getElementById("Voting").hidden = true;
console.log('there are NO votes in progress');
}
}
<section class="slice">
<div id="voting" class="container-fluid">
<!-- This is the shortcode example. They are all included in the html file so they can be activeted by a thirdpart application -->
[gravityform id="other ids" title="false" description="true" ajax="true"]
<!-- This is the shortcode that generate the div below, I excluded all the other div's elements -->
[gravityform id="2" title="false" description="true" ajax="true"]
<div class="gf_browser_chrome gform_wrapper gravity-theme" id="gform_wrapper_2" style="">
</div>
</div>
</section>
<div class="text-center">
<h3 id="noVoting" hidden>The window for voting has concluded.</h3>
</div>
<br>
<hr>