Develop Reference

Unable to toggle between division

I am creating a portfolio by watching this tutorial - https://www.youtube.com/watch?v=27JtRAI3QO8&list=WL&index=12 (I am stuck at 1:12:13)
I have created a qualification section. there are two division that is education and work.
By default it shows education tab. when I click on the work tab it shows content in the work tab. But when I click back on the education tab it doesn't show the content of the education tab.
actually i am beginner to js. i am unable to get the error in the js file.
my Html code is
<section class="qualification section">
<h2 class="section_title">Qualification</h2>
<span class="section_subtitle">My personal journey</span>
<div class="q_container container">
<div class="q_tabs">
<div class="q_btn btn-flex q_active " data-target ='#education'>
<i class="uil uil-graduation-cap q_icon"></i>Education
</div>
<div class="q_btn btn-flex " data-target ='#work'>
<i class="uil uil-briefcase-alt q_icon"></i>Work
</div>
</div>
<div class="q_section">
<!--==================== QUALIFICATION c1====================-->
<div class="q_content q_active " data-content id="Education">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electronics and communication Engineer</h3>
<span class="q_subtitle">M. S Ramaiah University of Applied Sciences</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2018-2022
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">PUC</h3>
<span class="q_subtitle">Gurukula independent PU college of science</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2016-2018
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">SSLC</h3>
<span class="q_subtitle">Sardar Vallabhbhai Patel Memorial H.S</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2006-2016
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
<!--==================== QUALIFICATION c2====================-->
<div class="q_content " data-content id="work">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Computer Communication Network and Digital Switching</h3>
<span class="q_subtitle">RTTC BSNL Mysore</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>08/07/2019- 13/07/2019
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">IOT and Computer vision</h3>
<span class="q_subtitle">The Sparks Foundation</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>26/07/2021- 21/08/2021
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electric vehicles</h3>
<span class="q_subtitle">Elite Techno Group</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>18/08/2021- 18/09/2021
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
</div>
</div>
</section>
Here is my CSS code
.skills__container{
row-gap: 0;
}
.skills__header{
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}
.skills__icon,
.skills__arrow{
font-size: 2rem;
color: var(--first-color);
}
.skills__icon{
margin-right: var(--mb-0-75);
}
.skills__title{
font-size: var(--h3-font-size);
}
.skills__subtitle{
font-size: var(--small-font-size);
color: var(--text-color-light);
}
.skills__arrow{
margin-left: auto;
transition: .4s;
}
.skills__list{
row-gap: 1.5rem;
padding-left: 2.7rem;
}
.skills__title{
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage{
height: 5px;
border-radius: .25rem;
}
.skills__bar{
background-color: hsl(250, 92%, 85%);
}
.skills__percentage{
display: block;
background-color: hsl(250, 69%, 61%);
}
.skills__html{ width: 90%;}
.skills__css{ width: 70%;}
.skills__bootstrap{ width: 80%;}
.skills__Angular{ width: 20%;}
.skills__java{ width: 70%;}
.skills__python{ width: 70%;}
.skills__php{ width: 5%;}
.skills__git{ width: 70%;}
.skills__sql{ width: 40%;}
.skills__agile{ width: 10%;}
.skills_close .skills__list{
height: 0;
overflow: hidden;
}
.skills_open .skills__list{
height: max-content;
margin-bottom: var(--mb-2-5);
}
.skills_open .skills__arrow{
transform: rotate(-180deg);
}
/*==================== QUALIFICATION ====================*/
.q_tabs{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}
.q_btn{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
}
.q_btn:hover{
color: var(--first-color);
}
.q_icon{
font-size: 1.8rem;
margin-left: var(--mb-0-25);
}
.q_data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
}
.q_title{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.q_subtitle{
display: inline-block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-1);
}
.q_cale{
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
.q_round{
display: inline-block;
width: 13px;
height: 13px;
background-color: var(--first-color);
border-radius: 50%;
}
.q_line{
display: block;
width: 1.9px;
height: 100%;
background-color: var(--first-color);
transform: translate(6px, -7px);
}
.q_content[data-content]{
display: none;
}
.q_active[data-content]{
display: block;
}
.q_btn.q_active{
color: var(--first-color);
}
Here is my js code
const tabs = document.querySelectorAll('[data-target]'),
tabc = document.querySelectorAll('[data-content]');
tabs.forEach(tab =>{
tab.addEventListener('click', () =>{
const target = document.querySelector(tab.dataset.target);
tabc.forEach(tabct =>{
tabct.classList.remove('q_active');
});
target.classList.add('q_active');
tabs.forEach(tab =>{
tab.classList.remove('q_active');
});
target.classList.add('q_active');
});
});

data-target and id need to be exactly the same. You used id="Education" but data-target ='#education'. Hope this will solve your problem.

Javascript stopped working after switching to another display [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>

The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.

How to add and align buttons on banner?

The banner should stay close to the info buttons like in this example:
I want to move this "Ads by Google" label left away from the buttons.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
body {
margin: 100px;
}
.banner-buttons {
display: inline-block;
position: relative;
font-size: 14px;
width: 50px;
overflow: hidden;
}
.showme {
display: none;
font-size: 10px;
}
.infoLink:hover .showme {
display: inline-block;
float: left;
}
.closeBtn {
cursor: pointer;
display: inline-block;
}
i:hover {
color: #d075f4;
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
</div>
HTML code: Here is the html, you will find the two buttons and icons there. If there is something missing just ask and I will update the post.

Try changing your p to a div and moving it after the other stuff. Then adding CSS to move the ad part:
<div id="main">
<div class="nanoSaturnBanner">
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink"
href="https://support.google.com/adsense/#topic=3373519"
target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close"></i>
</div>
</div>
<div id="text">teteasdasdasdsadasds sad asdasdasdasdasdas</div>
</div>
then add this to the new div class
float: right;
margin-right: 50%;

How do I loop through a list of li tags having same class and change their corresponding styles

I have a list of li tags having same class and and i want to change
their styles and their children elements styles when ever a user hover
over each the li which is the container, below is the code I have
tried. I used getElementsByClassName to get the node list of all li
tags, now, what I want to do is add event listener to each one of them
and manipulate the style of each when ever a user triggers a mouseover
event
function doFirst(){
var playList = document.getElementsByClassName("list");
var play = document.getElementsByClassName("play");
var plus = document.getElementsByClassName("plus");
var title = document.getElementsByClassName("title");
function songHover (e){
playList[0].style.backgroundColor = "#ccc";
play[0].style.display = "block";
plus[0].style.display = "block";
title[0].style.width = "50%";
}
function songHoverOut (e){
playList[0].style.backgroundColor = "#fff";
play[0].style.display = "none";
plus[0].style.display = "none";
title[0].style.width = "auto";
}
playList[0].addEventListener("mouseover", songHover, false);
playList[0].addEventListener("mouseleave", songHoverOut, false);
}
window.addEventListener("load", doFirst, false);
content .song-list{
width: 100%;
height: auto;
}
content .song-list ul{
margin-bottom:4%;
display: flex;
flex-direction: column;
}
content .song-list ul > p{
width: 100%;
padding: 6% 0 1% 0;
font-size: 140%;
color: #2b32b2;
}
content .song-list ul li{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
height: 10%;
margin-bottom: 6%;
padding: 2%;
}
.title{
border: 0px solid red;
flex:1;
max-width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.title h4{
font-weight: normal!important;
font-size: 98%;
white-space: nowrap;
overflow: hidden;
margin-bottom: 4px;
width: 100%;
}
.title p{
font-size: 85%;
white-space: nowrap;
overflow: hidden;
margin-right: 8px;
}
.title p:first-child{
flex:1;
}
.title p:last-child{
max-width: 50%;
}
content .song-list ul li i{
display: none;
border: 0px solid red;
width: 15%;
text-align: center;
padding: 3.8% 0;
}
.play{
}
.plus{
}
.duration{
display: block;
border: 0px solid red;
margin-left: auto;
width: 20%;
text-align: right;
padding: 3.8% 0;
}
<div class="song-list">
<ul>
<p>A</p>
<li class="list">
<span class="title">
<h4>A Sky Full Of Stars</h4>
<p>Coldplay</p>
<p>Ghost Stories</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:28</span>
</li>
<li class="list">
<span class="title">
<h4>The A Team (george.ortha#ferialaw.com)</h4>
<p>Ed Sheeran</p>
<p>+</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:18</span>
</li>
<li class="list">
<span class="title">
<h4>Adore You</h4>
<p>miley Cyrus</p>
<p>bangerz</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:38</span>
</li>
<li class="list">
<span class="title">
<h4>Adorn (george.ortha#ferialaw.com)</h4>
<p>Miguel</p>
<p>Kaleidoscope Dream</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">3:13</span>
</li>
<li class="list">
<span class="title">
<h4>Again</h4>
<p>Fetty Wrap</p>
<p>Billboard Hot 100 Singles Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
<ul>
<p>B</p>
<li class="list">
<span class="title">
<h4>
Back to December (george.ortha#ferialaw.com)
</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:43</span>
</li>
<li class="list">
<span class="title">
<h4>Bad (george.ortha#ferialaw.com)</h4>
<p>Wale</p>
<p>The Gifted</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">4:14</span>
</li>
<li class="list">
<span class="title">
<h4>Bad Blood</h4>
<p>Tailor Swift</p>
<p>2011 Billboard Chart</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Bartender</h4>
<p>Lady Antebellum</p>
<p>747</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
<li class="list">
<span class="title">
<h4>Believe Me</h4>
<p>Lil Wayne</p>
<p>Believe Me</p>
</span>
<i class="play">></i>
<i class="plus">+</i>
<span class="duration">5:12</span>
</li>
</ul>
</div>

I think that simpler solution is css :hover pseudo class (change styles when user hovers element with cursor).
Example: .parent:hover .some-child {hover styles}.

You seem to be a bit confused about the "addEventListener". You do not have to add an event listener to the window to initialize the code. Simply wrap it in a (function(){ // Your code })(); and it will execute as soon as possible.
But here you have an jsfiddle about how you could go about it: https://jsfiddle.net/g59x59rr/12/
Though, I used "querySelectorAll" instead of "getElementsByClassName". But I hope my solution will make sense to you. :)
(function() {
var lielem = document.querySelectorAll(".li"), i;
for (i = 0; i < lielem.length; i++) {
lielem[i].addEventListener('mouseover', function() {
this.style.color = 'red';
this.addEventListener('mouseout', function(){
this.style.color = 'black';
});
});
}
})();
<ul>
<li class="li">First Li</li>
<li class="li">Second Li</li>
<li class="li">Third Li</li>
</ul>

How can I keep spans in the same line vertically?

Here is my code in reality:
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
As you see, currently those icons and the texts aren't in the same line:
And this is expected result:
Note: The direction is right-to-left ..!
Well how can I do that?

You will need to make sure that the width of all your icons is the same.
You can use this using this css:
.note_icon i {
width: 20px;
}
The problem that you have there is that the icons are not the same width, so the elements near them are not aligned the same way.
The reason I changed the i element and not the span is because
span elements by default are inline, and the i element here is inline-block (due to the css of fontawesome).
inline blocks can't have width, so setting the width to the span element will not work, while setting the width to the i element (which is inline-block) will.
Here is a working version:
.note_icon i {
width: 20px;
}
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>

Since you have classes to all of them you can use padding to align them manually. Since their sizes are different I think this would be the easiest and most controllable way.
For example try this:
i.fa.fa-sort {
padding-right: 4px;
}
By the way the expected result seems the exact same like the "wrong" result... Not sure if that was posted by mistake.