FSR060523 :- Javascript Questions | DOM | Dom Manipulation

Q.s 1:- On button click change the icon i.e :- Facebook icon :- instagram icon
Q.s 2:- Give an example of ClassName

2 Likes

Image changing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <script>
        function changePic(){
            document.getElementById('change').innerHTML='<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png"/>'
        }
    </script>
    <div id="change">
        <img src="https://1000logos.net/wp-content/uploads/2021/04/Facebook-logo.png"/>
    </div>
    <button onclick="changePic()">Click To Change</button>
</body>
</html>

Class Example
doing…

1 Like
Q2. HTML 
<p class="para"> Lorem Ispum Dolar amit de.</p>

JS
console.log(document.getElementsByClassName('para'));

doing q1

1 Like

Answer-1
https://codepen.io/Akshitha-Annaram/full/PoxpJao

1 Like
<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p id="myParagraph">This is a paragraph.</p>

  <script>
    var paragraph = document.getElementById("myParagraph");
    paragraph.className = "highlight";
  </script>
</body>
</html>

2 Likes

const button = document.getElementById(“myButton”);
const icon = document.getElementById(“icon”);

button.addEventListener(“click”, function() {

if (icon.classList.contains(“fab fa-facebook”)) {

icon.classList.remove("fab", "fa-facebook");
icon.classList.add("fab", "fa-instagram");

} else {

icon.classList.remove("fab", "fa-instagram");
icon.classList.add("fab", "fa-facebook");

}
});

const myElement = document.getElementById(“myElement”);

myElement.className = “highlight”;

myElement.className += " important";

myElement.classList.remove(“highlight”);

const hasClass = myElement.classList.contains(“important”);
console.log(hasClass); // Output: true

2 Likes
session 11
<div id="demo1">
    <i class="fa-brands fa-facebook"></i>
</div>
<button onclick="fun1();">replace</button>


<script type="text/javascript" src="session11.js"></script>

function fun1(){
document.getElementById(‘demo1’).innerHTML = “
}

1 Like

Icon Changing

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    </style>
</head>
<body>
    <script>
        function changePic(){
            document.getElementById('change').innerHTML='<i class="fa fa-instagram" style="font-size:58px;color:red"></i>'
        }
    </script>
    <div id="change">
        <i class="fa fa-facebook-f" style=" font-size:58px;color:blue"></i>
    </div>
    <button onclick="changePic()">Click To Change</button>
</body>
</html>

Change with className

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .green {
            background-color: red;
            width: 70%;
            margin: auto;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <script>
        function changePic() {
            var changeBack = document.getElementById('change');
            changeBack.className = "green";
        }
    </script>
    <div class="red" id="change">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio nobis quas reprehenderit. Ipsa obcaecati
            reiciendis placeat sunt voluptatibus provident magnam autem, debitis, sit aperiam neque dicta fugiat
            distinctio, dolores commodi quo error quaerat reprehenderit. Dolorem repellendus vitae quis eos consequatur
            eius, perspiciatis eaque.</p>
    </div>
    <button onclick="changePic()">Click To Change</button>
</body>

</html>
1 Like
.highlight { background-color: blue; font-weight: bold; }

My name is Karan.

1 Like
<!DOCTYPE html>
<html>
<head>
  <style>
    .icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background-image: url(facebook-icon.png);
     
    }
  </style>
</head>
<body>
  <button onclick="changeIcon()">Change Icon</button>
  <div id="iconContainer">
    <div class="icon" id="myIcon"></div>
  </div>

  <script>
    function changeIcon() {
      var icon = document.getElementById("myIcon");
      icon.style.backgroundImage = "url(instagram-icon.png)";
    }
  </script>
</body>
</html>

2 Likes
.highlight { background-color: blue; font-weight: bold; }

My name is Karan.

1 Like

ans-2

class

document.getElementsByClassName(‘demo1’).innerHTML

1 Like
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>replace by innerhtml</title>
    <link rel="stylesheet" href="fontawesome-free-6.4.0-web/fontawesome-free-6.4.0-web/css/all.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
    <style>
        .new_name{
            color: aquamarine;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="icon">
    <i class="fa-brands fa-facebook"></i><br>
    
    </div>
    <button onclick="fun1()">click</button>

    <div class="name">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, maxime?</p>
        <h1>heading1</h1>
    </div>
    <button onclick="fun2()">change</button>
    

<script>
    function fun1(){

    
    document.getElementById("icon").innerHTML='<i class="fa-solid fa-user"></i>'

    }
    function fun2(){
        let x = document.getElementsByClassName("name");
        for(let y=0;y<x.length;y++){
            // console.log(x[y]);
            x[y].className="new_name"

        }
    }
        
</script>
    
</body>
</html>

3 Likes

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
</head>
<body>
    <div class="icons" id="change_icon">
    <i class="fa fa-facebook-official" style="font-size:36px"></i>
</div>
    <button onclick="fun()">changeIcon</button>

    <script>
        function fun(){
            document.getElementById("change_icon").innerHTML='<i class="fa fa-linkedin-square" style="font-size:36px"></i>'
            
        }
    </script>
</body>
</html>