I am trying to make a dropdown. So when i hover over the button, the list should pop up, and when i leave the button as well as the list (i.e listcontainer), the list should disappear. Everything works except the latter part. The list disappears as soon as i leave the button (even though i am over the list container). Issue I don't understand why. You may ignore the CSS code and html code. Semantics: Please note button is a div with class button
If you've read the code: The hideul function runs multiple times when it enters the listcontainer from the button (please check console). I don't get this part as well.
Please also let me know if there is a better way to do this logic.
Please visit to see the error
var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")
var mouseleftlistcontainer = true
var mouseleftbutton = true
function hideul(e, text) {
console.log(text)
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
}
button.addEventListener("mouseover", e => {
list.classList.add("effectt")
mouseleftbutton = false
hideul(e, "mouse entered button")
})
button.addEventListener("mouseleave", e => {
mouseleftbutton = true
hideul(e, " mouse left button")
})
listcontainer.addEventListener("mouseover", e => {
mouseleftlistcontainer = false
hideul(e, "mouse entered listcontainer")
})
listcontainer.addEventListener("mouseleave", e => {
mouseleftlistcontainer = true
hideul(e, "mouse left listcontainer")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
You should put all the objects, affected by the hover effect inside a container and trigger the effect on that one, like so:
var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")
var mouseincontainer = true
function hideul(show, text) {
console.log(text);
if (mouseincontainer) {
list.classList.add("effectt")
}
else {
list.classList.remove("effectt")
}
}
container.addEventListener("mouseover", e => {
hideul(true, "mouse entered button")
})
container.addEventListener("mouseleave", e => {
hideul(false, " mouse left button")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="btn-container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is the problem in your code
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
When you leave the button, this condition is met and your class is removed, but once you enter the list container, you need to add back the 'effectt' class.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 months ago.
I am trying to make this work (JavaScript file linked with my HTML and CSS) but for some reason it does not work. Any suggestions?
I do not understand whether the error is in my JavaScript or if it is due to how I typed in my HTML.
Just to be sure, I have enclosed my CSS code as well; It might be possible that there is some mistake as well.
script.js:
//targets
let snake = document.getElementById("snake");
let space = document.getElementById("space");
let fortune = document.getElementById("fortune");
//elements to be changed
let figure1 = document.getElementById("figure1");
let figure2 = document.getElementById("figure3");
let figure3 = document.getElementById("figure3");
//functions
snake.addEventListener("click",function(){
figure1.style.display = "";
});
space.addEventListener("click",function(){
figure2.style.display = "";
});
fortune.addEventListener("click",function(){
figure3.style.display = "";
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:ital,wght#0,500;0,700;1,300&display=swap" rel="stylesheet">
<title>My portfolio</title>
</head>
<body>
<header>
<h1>Simone</h1>
<nav>
<ul>
<li>About me</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>About me</h2>
<img id="face" src="./face.jpg" alt="Simone's face">
<p class="about">Ciao! my name is Simone, a self-taught front-end web developer based in England.
I am 26 years old and currently looking for my first job in the tech industry.</p>
<p class="about">I have got one year of experience in executing front-end mobile and web developement using Python,
HTML5, JavaScript and CSS3.</p>
<p class="about">I am committed to creating high presentation UI with exceptional handling to enhance user experience.</p>
<p class="about">In my spare time I enjoy travelling and going to the gym.</p>
</article>
<section class="projects">
<h2>Projects</h2>
<ul>
<li id="snake" class="project">Snake Game with Python</li>
<figure id="figure1"><img src="./snake.png" alt="Snake Game"><figcaption>Snake game developed using pygame.</figcaption></figure>
<li id="space" class="project">Space battleship</li>
<figure id="figure2"><img id="ship" src="./spaceship.png" alt="Spaceship"><figcaption id="figship">Spaceship game developed using pygame.</figcaption></figure>
<li id="fortune" class="project">JavaScript Fortune teller</li>
<figure id="figure3"><img src="./fortune.png" alt="JavaScript"><figcaption>Fortune teller generator using JavaScript</figcaption></figure>
</ul>
.....
CSS:
html {
font-size: 16px;
font-family: 'Museo Moderno',cursive;
background-color: hsla(0,70%,95%);
}
a{
text-decoration: none;
color: black;
font-weight: bold;
}
a:hover{
color: brown;
}
h1{
margin-top: 5rem;
margin-left: 2rem;
}
header nav{
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
header nav ul{
text-align: center;
display: flex;
margin-top: -3.8rem;
}
header nav ul li{
margin: 0.5rem 3rem 0.5rem 3rem;
list-style: none;
}
h2{
margin-left: 2rem;
margin-top:1rem;
}
main article{
display: block;
}
main article .about{
margin-left: 4rem;
margin-top: 1.5rem;
}
#face{
float: inline-end;
border-radius: 1rem;
margin-right: 2rem;
margin-right: 2.7rem;
}
main .projects{
margin-bottom: 2rem;
margin-top: 2rem;
}
main .projects ul {
margin-top: 2rem;
margin-left: 2rem;
}
#figure1{
display: none;
}
#figure2{
display: none;
}
#figure3{
display: none;
}
#ship{
width: 10rem;
margin-left: -4rem;
}
#figship{
margin-left: -4rem;
}
main .projects .project {
margin-top: 1rem;
}
#skills{
display: block;
margin-bottom: 2rem;
}
main .skills{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items:center;
justify-content:space-between;
margin-left: 3rem;
margin-right: 3rem;
}
main .skills img{
width: 10rem;
}
hr{
margin-top: 2rem;
margin-bottom: 2rem;
}
main footer .bottom{
text-align: center;
margin: 2rem;
}
You are addding your js before the element is created, as #ericmp said, one option is to add the defer attribute to your script element, another option is to add you script element somewhere after the element, like at the end of your body tag.
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
body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
#media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li>Home</li>
<li>Information</li>
<li>Partner</li>
<li>Freelencer</li>
<li>Comunity</li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
Im learning html/css/js from a Youtube video tutorial. Im learning how to write js code but i can't help to solve a problem. I hope you give me the solution guys.
The problem is about add.EventListener. i saw the code in chrome, in console it shows:
"bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null"
I would like to use toggle hide and show with JS.
You are getting this error ( "bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null" ) because you are specifying invalid element classes in js.
Use this:
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
Since your elements in html are:
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">
Without seeing your code, it's hard to be specific as to what your issue is. Null is the absence of a value or object. When we call on a selector that does not exist, we can trigger the same error of null. Check if you are targeting an id that exists or that you are targeting the correct element using it's class.
Cross-reference your code to the following example to see if you may have missed something. This is the most basic of examples.
var box = document.getElementById('box');
document.getElementById('button').addEventListener('click', function(){
if( box.classList.contains('active') ){
box.classList.remove('active');
} else {
box.classList.add('active') ;
}
});
#button {
background-color: orange;
border: 1px solid #000;
color: #000;
padding: 0.5rem 1rem;
cursor: pointer;
}
#box {
margin-top: 2rem;
display: none;
padding: 1rem;
border: 1px solid #000;
}
#box.active {
display: block;
}
<button id="button">CLICK ME</button>
<div id="box">I am a box. Watch me.</div>
I'm learning javascript and used this youtube video as an example:
https://www.youtube.com/watch?v=RLc8NB2JyxE&
He does not include source code but I have made sure that my code is exactly how it is in the video.
The tutorial walks through how to use html, css, and javascript to make a navbar that changes as you scroll down the screen. Any example of this error I could find had a solution of "put the script at the end of the html body" but mine is already there and I'm not sure why the script is not loading.
this is the error:
app.js:28 Uncaught TypeError: Cannot read property 'style' of null
at app.js:28
at Array.forEach (<anonymous>)
at IntersectionObserver.navCheck (app.js:16)
(anonymous) # app.js:28
navCheck # app.js:16
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>PhotoGem | slogan here</title>
</head>
<body>
<header>
<nav>
<h1>PhotoGem</h1>
<ul>
<li><a data-page="home" href="#">Home</a></li>
<li><a data-page="project" href="#">Project</a></li>
<li><a data-page="contact" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section data-index="0" class="home">
<h2>Home</h2>
</section>
<section data-index="1" class="project">
<h2>Projects</h2>
</section>
<section data-index="2" class="contact">
<h2>Contact</h2>
</section>
</main>
<script src="./app.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
header {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0px;
background: white;
}
nav {
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: black;
text-decoration: none;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 5rem;
color: white;
}
.home {
background: linear-gradient(to right top, #f46b45, #eea849);
}
.project {
background: linear-gradient(to right top, #005c97, #363795);
}
.contact {
background: linear-gradient(to right top, #e53935, #e35d5b);
}
.bubble {
position: absolute;
z-index: -2;
background: linear-gradient(to right top orange, yellow);
}
app.js
const sections = document.querySelectorAll("section");
const bubble = document.querySelector(".bubble");
const gradients = [
"linear-gradients(to right top, #f46b45, #eea849)",
"linear-gradients(to right top, #005c97, #363795)",
"linear-gradients(to right top, #e53935, #e35d5b)"
];
const options = {
threshold: 0.7
};
let observer = new IntersectionObserver(navCheck, options);
function navCheck(entries) {
entries.forEach(entry => {
const className = entry.target.className;
const activeAnchor = document.querySelector(`[data-page=${className}]`);
const gradientIndex = entry.target.getAttribute("data-index");
const coords = activeAnchor.getBoundingClientRect();
const directions = {
height: coords.height,
width: coords.width,
top: coords.top,
left: coords.left
};
if (entry.isIntersecting) {
bubble.style.setProperty("left", `${directions.left}px`);
bubble.style.setProperty("top", `${directions.top}px`);
bubble.style.setProperty("width", `${directions.width}px`);
bubble.style.setProperty("height", `${directions.height}px`);
}
});
}
sections.forEach(section => {
observer.observe(section);
});
I want to change sections on scroll, to kill the overflow of a single page website and change the sections that have 100% height on scroll. I tried using the:
https://github.com/hellsan631/angular-fullpage.js
but cannot make it work. When I follow all the instructions I get the following errors:
Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
I also tried using https://github.com/alvarotrigo/fullPage.js, no errors but nothing happens.
Anyone has a different solution, or a way to fix this one? Thanks.
Here is a Swiper content sliding plugin, similar to fullpage.js:
http://idangero.us/swiper/demos/20-mousewheel-control.html
You can scroll it with mousewheel, mouse (desktop touch emulation), keypad (on desktop) and finger (on touch devices). Plus there is a non-JQuery version available.
Additionally, you can even configure it to change page background colors, like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
body {
transition: background-color .5s ease-in-out;
}
body.red {
background-color: #f40;
}
body.orange {
background-color: #f90;
}
body.yellow {
background-color: #fe0;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-bg="red">Slide 1</div>
<div class="swiper-slide" data-bg="orange">Slide 2</div>
<div class="swiper-slide" data-bg="yellow">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
var body = document.body;
body.className = 'red';
var slider = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true,
onSlideChangeStart: function (swiper) {
var currentSlide = swiper.slides[ swiper.activeIndex ];
body.className = currentSlide.getAttribute( 'data-bg' );
console.log( currentSlide.getAttribute( 'data-bg' ) );
},
});
</script>
</body>
</html>
DEMO
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
Hey earthlings,
i started learning HTML and CSS. Currently I'm dealing with style classes. I created a simple example. What I want to reach is, that the titlebar changes the font color, the font-size and the background color if button1 is clicked.
Initially the titlebar has appended the titlebar-class, after button1 is clicked the darktitle-class should also be added and overwrite certain attributes.
However in this configuration it doesn't happen. If you change the order of the .darktitle and .titlebar class in css file it works. I wonder why.
The CSS Styles should be on the same priority level, so I would expect that the laterly assigned would overwrite the attributes.
TNX
you can use !important to override styles like this
.darktitle {
color: #000000!important;
background: grey!important;
font-size: 25px!important;
}
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
The order of your css selectors matter when both selectors are being applied to the same element. Move the ".darktitle" below the ".titlebar" as in this example. Then when applied by the button the ".darktitle" sstyles will override those same properties in ".titlebar".
Please take a look at this link about CSS specificity, there you will read about your question and why not to use !important declaration.
Specificity at MDN