I have a javascript script, html, and css I put together on JSfiddle that I now need to essentially put on a page in wordpress. I'm using a child of the generatePress theme.
I'm doing it this way because my client wants to mostly use templates and plugins so it's more user-friendly. However, this part I could NOT figure out how to do with a plugin, so I coded it.
I tried to use wp_enqueue_script() but I couldn't seem to get it to work. I'm currently using a gutenberg block to insert the custom HTML and loading the CSS on the stylesheet. This feels completely backwards and I'm sure there's an easier way to do this. Or if not easier, more logical.
The code when I tried to enqueue it--
<?php
function generatepress_child_enqueue_scripts() {
if ( is_rtl() ) {
wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
}
wp_enqueue_script('script', get_template_directory_uri() . '/js/meet-the-needs.js',
array (), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
I'm trying to avoid jQuery just so I don't have to load it. I coded this in pure JS. When I searched this forum I found a lot on how to enqueue scripts, but when I followed that I hit a dead end. No console errors, the thing just didn't work. When I selected a dropdown item, it didn't show the resulting div changing display attributes from "none" to "block" like it does in my JSfiddle. The HTML works fine, so I'm pretty sure it's something to do with loading order or the enqueue-ing process.
HTML-
<div class="container">
<p>
Please select the parish you wish to help:
</p>
<select id="dropdown">
<option class="5" value="5"> Acadia Parish</option>
<option class="6" value="6"> Allen Parish</option>
<option class="4" value="4">Ascension Parish</option>
<option class="4" value="4">Assumption Parish</option>
<option class="7" value="7">Avoyelles Parish</option>
<option class="6" value="6">Beauregard Parish</option>
<option class="8" value="8">Bienville Parish</option>
<option class="8" value="8">Bossier Parish</option>
<option class="8" value="8">Caddo Parish</option>
<option class="6" value="6">Calcasieu Parish</option>
<option class="9" value="9">Caldwell Parish</option>
<option class="6" value="6">Cameron Parish</option>
<option class="7" value="7">Catahoula Parish</option>
<option class="8" value="8">Claiborne Parish</option>
<option class="7" value="7">Concordia Parish</option>
<option class="8" value="8">DeSoto Parish</option>
<option class="2" value="2">East Baton Rouge Parish</option>
<option class="9" value="9">East Carroll Parish</option>
<option class="2" value="2">East Feliciana Parish</option>
<option class="5" value="5">Evangeline Parish</option>
<option class="9" value="9">Franklin Parish</option>
<option class="7" value="7">Grant Parish</option>
<option class="5" value="5">Iberia Parish</option>
<option class="2" value="2">Iberville Parish</option>
<option class="8" value="8">Jackson Parish</option>
<option class="1" value="1">Jefferson Parish</option>
<option class="6" value="6">Jefferson Davis Parish</option>
<option class="5" value="5">Lafayette Parish</option>
<option class="4" value="4">Lafourche Parish</option>
<option class="7" value="7">LaSalle Parish</option>
<option class="9" value="9">Lincoln Parish</option>
<option class="3" value="3">Livingston Parish</option>
<option class="9" value="9">Madison Parish</option>
<option class="9" value="9">Morehouse Parish</option>
<option class="8" value="8">Natchitoches Parish</option>
<option class="1" value="1">Orleans Parish</option>
<option class="9" value="9">Ouachita Parish</option>
<option class="1" value="1">Plaquemines Parish</option>
<option class="2" value="2">Pointe Coupee Parish</option>
<option class="7" value="7">Rapides Parish</option>
<option class="8" value="8">Red River Parish</option>
<option class="9" value="9">Richland Parish</option>
<option class="8" value="8">Sabine Parish</option>
<option class="1" value="1">St. Bernard Parish</option>
<option class="4" value="4">St. Charles Parish</option>
<option class="3" value="3">St. Helena Parish</option>
<option class="4" value="4">St. James Parish</option>
<option class="4" value="4">St. John the Baptist Parish</option>
<option class="5" value="5">St. Landry Parish</option>
<option class="5" value="5">St. Martin Parish</option>
<option class="5" value="5">St. Mary Parish</option>
<option class="3" value="3">St. Tammany Parish</option>
<option class="3" value="3">Tangipahoa Parish</option>
<option class="9" value="9">Tensas Parish</option>
<option class="4" value="4">Terrebonne Parish</option>
<option class="9" value="9">Union Parish</option>
<option class="5" value="5">Vermilion Parish</option>
<option class="8" value="8">Vernon Parish</option>
<option class="3" value="3">Washington Parish</option>
<option class="8" value="8">Webster Parish</option>
<option class="2" value="2">West Baton Rouge Parish</option>
<option class="9" value="9">West Carroll Parish</option>
<option class="2" value="2">West Feliciana Parish</option>
<option class="7" value="7">Winn Parish</option>
</select>
<div class="result">
<div id="region1_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 1!
</p>
<div class="see_the_needs">
<button href=";near=70119&organizationIds=%5B583127%5D">
See the Needs of Region 1
</button>
</div>
</div>
<div id="region2_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 2!
</p>
<div class="see_the_needs">
<button href=";near=70801&organizationIds=%5B583127%5D">
See the Needs of Region 2
</button>
</div>
</div>
<div class="see_the_needs">
<div id="region3_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 3!
</p>
<button href=";near=70433&organizationIds=%5B583127%5D">
See the Needs of Region 3
</button>
</div>
</div>
<div id="region4_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 4!
</p>
<div class="see_the_needs">
<button href=";near=70301&organizationIds=%5B583127%5D">
See the Needs of Region 4
</button>
</div>
</div>
<div id="region5_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 5!
</p>
<div class="see_the_needs">
<button href=";near=70501&organizationIds=%5B583127%5D">
See the Needs of Region 5
</button>
</div>
</div>
<div id="region6_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 6!
</p>
<div class="see_the_needs">
<button href=";near=70601&organizationIds=%5B583127%5D">
See the Needs of Region 6
</button>
</div>
</div>
<div id="region7_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 7!
</p>
<div class="see_the_needs">
<button href=";near=71301&organizationIds=%5B583127%5D">
See the Needs of Region 7
</button>
</div>
</div>
<div id="region8_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 8!
</p>
<div class="see_the_needs">
<button href=";near=71101&organizationIds=%5B583127%5D">
See the Needs of Region 8
</button>
</div>
</div>
<div id="region9_result" class="regions" style="display:none;">
<p class="region_num">
Your parish is in Region 9!
</p>
<div class="see_the_needs">
<button href=";near=71201&organizationIds=%5B583127%5D">
See the Needs of Region 9
</button>
</div>
</div>
</div>
</div>
JS
const elem = document.getElementById("dropdown");
elem.addEventListener("change", () => {
Array.from(document.getElementsByClassName("result")[0].children, (child) => child.style.display = "none")
const hiddenDiv = document.getElementById(`region${elem.value}_result`);
hiddenDiv.style.display = "block";
})
const hiddenDiv = document.getElementById(`region${elem.value}_result`);
hiddenDiv.style.display = "block";
CSS
.container {
text-align: center;
padding: 50px;
background-color: AntiqueWhite;
}
button {
border-radius: 5px;
padding: 4px;
border-style: solid;
border-width: 1px;
border-color: grey;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background-color: Gainsboro;
}
button:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
background-color: DarkGrey;
}
#dropdown {
margin: 20px;
border-radius: 10px;
padding: 2px;
border-style: solid;
border-width: 1px;
border-color: grey;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.regions {
padding: 20px;
border-top: 1px solid DarkGrey;
}
.region_num {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
}