Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
L'erreur de la propriété JS
Non Résolu
Bonjour à tous,
Je suis en train de créer mon portfolio personnel en suivant le tutoriel, j'ai un problème avec la propriété classList.
Lorsque je clique sur le bouton expérience professionnelle et formations dans la console il y a une erreur qu'il s'affiche :
Uncaught TypeError: Cannot read properties of null (reading 'classList')
C'est à cause de cette ligne de code l'erreur est affiché dans la console :
//deactivate existing active 'tab-content'
aboutSection.querySelector(".tab-content.active").classList.remove("active");
//activate new 'tab-content'
aboutSection.querySelector(target).classList.add("active");
J'ai fait des recherches sur l'Internet pour corriger ce bug, mais je n'arrive pas toujours régler ce problème.
Voici le code de HTML :
<!-- about section start -->
<section class="about-section section">
<div class="container">
<div class="row">
<div class="section-title">
<h2 data-heading="informations principales">À propos de moi</h2>
</div>
</div>
<div class="row">
<div class="about-img">
<div class="img-box inner-shadow">
<img src="img/profile.jpg" class="outer-shadow" alt="profile-pic">
</div>
<!-- social links start-->
<div class="social-links">
<a href="#" class="outer-shadow hover-in-shadow"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="outer-shadow hover-in-shadow"><i class="fab fa-twitter"></i></a>
<a href="#" class="outer-shadow hover-in-shadow"><i class="fab fa-instagram"></i></a>
<a href="#" class="outer-shadow hover-in-shadow"><i class="fab fa-linkedin"></i></a>
</div>
<!-- social links end-->
</div>
<div class="about-info">
<p><span>Lorem ipsum dolor sit amet</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="btn-1 outer-shadow hover-in-shadow">Télécharger CV</a>
<a href="#" class="btn-1 outer-shadow hover-in-shadow">Contactez moi</a>
</div>
</div>
<!-- about tabs start-->
<div class="row">
<div class="about-tabs">
<span class="tab-item outer-shadow active" data-target=".compétences">compétences</span>
<span class="tab-item" data-target=".expérience professionnelle">expérience professionnelle</span>
<span class="tab-item" data-target=".formations">formations</span>
</div>
</div>
<!-- about tabs end-->
<!-- skills start-->
<div class="row">
<div class="skills tab-content active">
<div class="row">
<!-- skill item start-->
<div class="skill-item">
<p>HTML</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(50% - 14px);">
<span>50%</span>
</div>
</div>
</div>
<!-- skill item end-->
<!-- skill item start-->
<div class="skill-item">
<p>JavaScript</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(60% - 14px);">
<span>60%</span>
</div>
</div>
</div>
<!-- skill item end-->
<!-- skill item start-->
<div class="skill-item">
<p>PHP</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(70% - 14px);">
<span>70%</span>
</div>
</div>
</div>
<!-- skill item end-->
<!-- skill item start-->
<div class="skill-item">
<p>Bootstrap</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(50% - 14px);">
<span>50%</span>
</div>
</div>
</div>
<!-- skill item end-->
<!-- skill item start-->
<div class="skill-item">
<p>Symfony</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(50% - 14px);">
<span>50%</span>
</div>
</div>
</div>
<!-- skill item end-->
<!-- skill item start-->
<div class="skill-item">
<p>React.js</p>
<div class="progress outer-shadow">
<div class="progress-bar" style="width: calc(50% - 14px);">
<span>50%</span>
</div>
</div>
</div>
<!-- skill item end-->
</div>
</div>
</div>
<!-- skills end-->
<!-- experience start -->
<div class="row">
<div class="experience tab-content">
<div class="row">
<div class="timeline">
<div class="row">
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-briefcase icon"></i>
<span>Oct. 2019 - Oct. 2020</span>
<h3>Développeur web</h3>
<h4>Valauris Consulting</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-briefcase icon"></i>
<span>Avr. 2016</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-briefcase icon"></i>
<span>Janv. 2016 </span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-briefcase icon"></i>
<span>Juil. 2015</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
</div>
</div>
</div>
</div>
</div>
<!-- experience end -->
<!-- education start -->
<div class="row">
<div class="education tab-content">
<div class="row">
<div class="timeline">
<div class="row">
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2018 - 2020</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2017</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2017</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2015 - 2017</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2014 - 2015</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
<!-- timeline item start -->
<div class="timeline-item">
<div class="timeline-item-inner outer-shadow">
<i class="fas fa-graduation-cap icon"></i>
<span>2003 - 2012</span>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- timeline item end -->
</div>
</div>
</div>
</div>
</div>
<!-- education end -->
</div>
</section>
<!-- about section end-->
Le code en JavaScript :
(() => {
const aboutSection = document.querySelector(".about-section"),
tabsContainer = document.querySelector(".about-tabs");
tabsContainer.addEventListener("click", (event) =>{
/* if event.target contains 'tab-item' class and not contains 'active' class */
if(event.target.classList.contains("tab-item") && !event.target.classList.contains("active")){
const target = event.target.getAttribute("data-target");
//deactivate existing active 'tab-item'
tabsContainer.querySelector(".active").classList.remove("outer-shadow", "active");
//activate new 'tab-item'
event.target.classList.add("active", "outer-shadow");
//deactivate existing active 'tab-content'
aboutSection.querySelector(".tab-content.active").classList.remove("active");
//activate new 'tab-content'
aboutSection.querySelector(target).classList.add("active");
}
})
})();
Merci d'avance pour vos réponses.
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.