So I am making a channel campaign site, where you subscribe to the channel, watch a few videos, and get rewarded with points. The problem is, I can’t seem to get the YouTube channel preview to show up in each card modal
<section class="container py-5">
<h2 class="mb-4">
Available Tasks
</h2>
<div class="row">
<?php foreach($channels as $channel): ?>
<div class="col-md-4 mb-4">
<div class="card bg-dark border-secondary">
<div class="card-body">
<h5>
<?php echo htmlspecialchars($channel['channel_name']); ?>
</h5>
<p>
Reward:
<strong>
<?php echo $channel['reward_points']; ?>
Points
</strong>
</p>
<button
class="btn btn-danger task-btn"
data-id="<?php echo $channel['id']; ?>"
data-name="<?php echo htmlspecialchars($channel['channel_name']); ?>"
data-url="<?php echo htmlspecialchars($channel['channel_url']); ?>"
data-points="<?php echo $channel['reward_points']; ?>"
data-bs-toggle="modal"
data-bs-target="#taskModal">
View Task
</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
and here is the js that runs it as well
[code]document.addEventListener(
“DOMContentLoaded”,
function(){
let taskButtons =
document.querySelectorAll(“.task-btn”);
taskButtons.forEach(btn=>{
btn.addEventListener(
“click”,
function(){
document.getElementById(
“channel_id”
).value =
this.dataset.id;
document.getElementById(
“taskName”
).innerText =
this.dataset.name;
document.getElementById(
“taskPoints”
).innerText =
this.dataset.points;
document.getElementById(
“youtubeLink”
).href =
this.dataset.url;
});
});[/code]
There are two ways you can format your code to make it easier to read and test:
- After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (
</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
- Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
