CODEWITHSUNDEEP
javascripthtmlcssbootstrap-5
Captain Anunnaki
Captain Anunnaki

Reputation: 25

How can I use bootstrap and js properly?

So I was wondering if there is a way to use javascript on top of Bootstrap 5 and I tried so but unfortunately, it doesn't work, so I was wondering what am I doing wrong? Could it be that I'm doing the js wrong? Or is it something to do with bootstrap itself?

var clicka = document.getElementById('colorClicker');
var bgchange = document.getElementById('showcasea');

clicka.addEventListener('click',() => {
bgchange.style.backgroundColor = red;
});
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="C:\Users\Elite\Desktop\bootstrap-travesy\css\style.css">
    <title>Frontend Bootcamp</title>
</head>
<body>

<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--!                               SHOWCASE                                             -->

<section id="showcasea" class="bg-dark text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">

    <div class="container">
        <div class="d-sm-flex align-items-center justify-content-between">
            <div>
                

                <h1>Become a <span class="text-warning">Web Developer</span> </h1>
                <p class="lead my-4">
                We focus on teaching our students the fundamentals of the latest
                and greatest technologies to prepare them for their first dev role!
                </p>
               


                <!--TODO:|USE JS HERE|-------->
<div class="container">

    <div 
    id="changeStuff" 
        
    class="            
                            d-flex 
                      flex-direction-row 
                      align-items-center 
                     justify-content-evenly
                            mr-5">
                            <button class="btn btn-warning btn-lg m-r-20">Start The Enrollment</button>
    
        <a href="" id="colorClicker" class="btn btn-sm btn-primary rounded-circle">
            <svg xmlns="http://www.w3.org/2000/svg" id="icony" class = "bg-dark" width="2.5vh" height="2.5vh" fill="currentColor" class="bi bi-code-square" viewBox="0 0 16 16">
                <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                <path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z"/>
              </svg></a>
        </div>    
</div>
        <!--TODO:|USE JS HERE|-------->
        
            </div>
            <img class="img-fluid w-50 d-none d-sm-block" src="img/showcase.svg" alt="">
        </div>
    </div>


</section>
<!--!                             END OF SHOWCASE                                        -->
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////// -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 
crossorigin="anonymous"></script>    
<script src="coolStuff.js"></script>
</body>
</html>

Keep in mind I added only the part I wanted to change because I would have to add too much code.

Upvotes: 0

Views: 90

Answers (2)

John
John

Reputation: 5335

So other than red needing to be "red" with quotes and () needing to be function(), your jscode is fine. The issue occures with this class: bg-dark It seems bootstrap has this background color set to !important so its not able to be changed. So what I recommend is to remove this class and style the background using CSS instead of bootstrap without the !important tag, then your jscode will work to change the background color.

See what I did here, I changed the class bg-dark to something random like bg-dark-temp for #showcasea. And now your jscode works (I also had to remove the empty href in colorClicker for your button to work).

Anyways take a look here:

var clicka = document.getElementById('colorClicker');
var bgchange = document.getElementById('showcasea');

clicka.addEventListener("click", function() {
bgchange.style.backgroundColor = "red";
}); 
.bg-dark-temp {
  background-color: #212529;
}
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="C:\Users\Elite\Desktop\bootstrap-travesy\css\style.css">
    <title>Frontend Bootcamp</title>
</head>
<body>

<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--!                               SHOWCASE                                             -->

<section id="showcasea" class="bg-dark-temp text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">

    <div class="container">
        <div class="d-sm-flex align-items-center justify-content-between">
            <div>
                

                <h1>Become a <span class="text-warning">Web Developer</span> </h1>
                <p class="lead my-4">
                We focus on teaching our students the fundamentals of the latest
                and greatest technologies to prepare them for their first dev role!
                </p>
               


                <!--TODO:|USE JS HERE|-------->
<div class="container">

    <div 
    id="changeStuff" 
        
    class="            
                            d-flex 
                      flex-direction-row 
                      align-items-center 
                     justify-content-evenly
                            mr-5">
                            <button class="btn btn-warning btn-lg m-r-20">Start The Enrollment</button>
    
        <a id="colorClicker" class="btn btn-sm btn-primary rounded-circle">
            <svg xmlns="http://www.w3.org/2000/svg" id="icony" class = "bg-dark" width="2.5vh" height="2.5vh" fill="currentColor" class="bi bi-code-square" viewBox="0 0 16 16">
                <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                <path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0zm2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0z"/>
              </svg></a>
        </div>    
</div>
        <!--TODO:|USE JS HERE|-------->
        
            </div>
            <img class="img-fluid w-50 d-none d-sm-block" src="img/showcase.svg" alt="">
        </div>
    </div>


</section>
<!--!                             END OF SHOWCASE                                        -->
<!-- ///////////////////////////////////////////////////////////////////////////////////////////////////////////// -->


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" 
crossorigin="anonymous"></script>    
<script src="coolStuff.js"></script>
</body>
</html>

Upvotes: 1

Riri
Riri

Reputation: 61

Try this:

bgchange.style.backgroundColor = "red";

Upvotes: 0

Related Questions