I have some js files that are not loading. The code works sound if I use <script> //js code </script> in the page template but not if I try and load the script from a separate file.
here is page template: simsgen.php
`
<?php include 'dlc_packs.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamically Generated Labels</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri() . '/challengeGenerator.js'; ?>"> </script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() . '/checkbox-interactions.js'; ?>"></script>
</head>
<body>
<h2>Filters</h2>
<label>
<input type="checkbox" id="selectAllPacks"> Select All
</label>
<br>
<label>
<input type="checkbox" id="selectExpansionPacks" class="dlc-pack"> Select All Expansion Packs
</label>
<label>
<input type="checkbox" id="selectGamePacks" class="dlc-pack"> Select All Game Packs
</label>
<label>
<input type="checkbox" id="selectStuffPacks" class="dlc-pack"> Select All Stuff Packs
</label>
<br>
<div class="checkbox-container flex">
<?php foreach ($dlcPacks as $label => $packs): ?>
<h3><?= $label ?></h3>
<?php foreach ($packs as $pack): ?>
<label>
<input type="checkbox" class="dlc-pack" value="<?= $pack ?>"> <?= $pack ?>
</label>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<h3> Generate Build or Game Play</h3>
<label for="selectBuildChallenge">
<input type="checkbox" id="selectBuildChallenge" name="challengeType"> Build Challenge
</label>
<label for="selectGameChallenge">
<input type="checkbox" id="selectGameChallenge" name="challengeType"> Game Challenge
</label>
Generate Sim Build
<div id="sim-build">
</div>
</body>
</html>
</main><!-- #main -->
`
here is checkbox-interactions.js
`$(document).ready(function() {
// Select All Checkbox Functionality
$(“#selectAllPacks”).click(function() {
$(“.dlc-pack”).prop(‘checked’, $(this).prop(‘checked’));
});
// Individual Checkbox Functionality
$(".dlc-pack").click(function() {
if (!$(this).prop('checked')) {
$("#selectAllPacks").prop('checked', false);
} else {
var allChecked = true;
$(".dlc-pack").each(function() {
if (!$(this).prop('checked')) {
allChecked = false;
return false; // Break out of loop
}
});
$("#selectAllPacks").prop('checked', allChecked);
}
});
});
`
tried enqueuing it from functions.php, calling it from a script file and linking the source. Doesn’t seem to work
New contributor
Shannon Weston is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.