I have made a php script like this
<div>
<div class="container">
<?php $articles = getArticle(3); ?>
<div class="row borderrowindex">
<?php foreach ($articles as $article): ?>
<div class="col-md-4">
<a class="newslink" href="artikel.php?title=<?= urlencode($article['title']) ?>">
<div class="card">
<div class="card-body">
<img class="articlecard-photo" src="assets/img/background.jpeg" alt="Article Image">
<h4 class="card-title text-center"><?= $article['title'] ?></h4>
<p class="card-text fullText"><?= $article['article'] ?></p>
</div>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/artlimit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
And script of artlimit.js like this
document.addEventListener('DOMContentLoaded', function () {
const fullTextElements = document.querySelectorAll('.fullText');
const wordLimit = 5; // Adjust the word limit as needed
fullTextElements.forEach(element => {
let text = element.textContent;
let words = text.split(' ');
if (words.length > wordLimit) {
let truncatedText = words.slice(0, wordLimit).join(' ') + '...';
element.textContent = truncatedText;
}
});
});
From the js file it was supposed limiting the word shown only 5 word but when I apply it, all of the text based on <?= $article['article'] ?>
shown not limited to 5 word. The data are fetched from database and the data also save as text in the database itself
Can someone help me what’s wrong with this?