FSR170823 :- Javascript DOM | Dom Manipulation

JavaScript Conversations
#1

Q.s 1:- Give an example of className property
Q.s 2 :- Write a code to get all elements by tag name and with loop add styling.
Q.s 3:- On button click add two numbers in javascript from two HTML Inputs.

#2

q1: `var d=document.getElementsByTagName(‘h1’)

for(var i=0;i<d.length;i++){
    d[i].className="class1";
}`
1 Like
#3 
<p>Click the button to set a class for div.</p> 
  
    <div id="d1"> 
        Swapnil_kr
    </div> 
  
    <button onclick="myFun()">Add Data</button> 
  
    <script> 
        function myFun() { 
            document.getElementById("d1").className =  "swap1"; 
        } 
    </script>
1 Like
#4

Q2:
html:

        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <h1>hello</h1>
        <button onclick="fun3()">submit</button>

js:

function fun3(){
    var d=document.getElementsByTagName('h1')
    for(var i=0;i<d.length;i++){
        d[i].className="class1";
    }
}

css:

.class1{
                background-color: aqua;
            }
1 Like
#5

Q3

function addNumbers() {
            // Get values from input fields
            var num1 = parseFloat(prompt("Enter the first number:"));
            var num2 = parseFloat(prompt("Enter the second number:"));

            // Check if the input is valid
            if (!isNaN(num1) && !isNaN(num2)) {
                // Add the numbers
                var sum = num1 + num2;

                // Display result
                alert("The sum is: " + sum);
            } else {
                // Display an error if input is not a number
                alert("Please enter valid numbers.");
            }
        }
#6 
Example :
1. <html>
<p id="Initial_id"> Passage here </p>
</html>
Javascript
document.getElementById('Initial_id').className = "Demo_class";
 
2. 
<html>
<h1>tag name 1</h1>
<h1>tag name 2</h1>
<h1>tag name 3</h1>
<h1>tag name 4</h1>
<button onclick="fun2();">click me</button>
</html>
Javascript
function fun1(){

 var x= document.getElementsByTagName('h1');
for(y=0;y<x.length.y++){
x[y].style.color="red";
}
3. 
<html>
<input type="text" placholder="Enter number1 " id="input1">
<input type="text" placeholder="Enter number2"id="input2">
<button onclick="fun();" id="demo">click me</button>
</html>
javascript
function fun(){
     var x = document.getElementById('input1').value;
 var y = document.getElementById('input2').value;
  var z=x+y;
  document.getElementById('demo').innerHTML += z;
}
#7 
<button onclick="fun0();">calling element by tag</button>
    <h1>hello1</h1>
    <h1>hello2</h1>
    <h1>hello3</h1>
    <h1>hello4</h1>


   


function fun0(){
    var z=document.getElementsByTagName('h1');
    for(var j=0;j<=z.length;j++){
        z[j].className='swap';
    }
}

.swap{
        font-weight: 400;
        font-family: 'Courier New', Courier, monospace;
    }
#8

Q3:
html:

<input id="num1" type="number" placeholder="enter num 1">
        <input id="num2" type="number" placeholder="enter num 2">
        <button onclick="add()">add</button>

js:

function add(){
    var a= document.getElementById('num1').value;
    var b= document.getElementById('num2').value;
    var c= parseInt(a)+parseInt(b);
    document.write(c);
}
#9 
Q1:
 <div class="a_class" id="id1"></div>
<button onclick="funNm();">class name</button>

function funNm(){
    document.getElementById('demo').className += "b_class"
}

Q2:

    <button onclick="tag();">Tag name</button>
    <p>hello</p>
    <p>how </p>
    <p>are</p>
    <p>u</p>
    <p>good</p>
    <p>morning</p>

function tag(){
    var x=document.getElementsByTagName('p');
   

    for(var i=0;i<x.length;i++){
        x[i].style.color="blue";
        x[i].style.backgroundColor="aqua";
    }

}
#11

Screenshot (15)
Screenshot (15)1920×1080 180 KB

Screenshot (16)
Screenshot (16)1920×1080 180 KB

#12

index.html

<!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>
        .para {
            color: red;
        }

        .heading {
            color: aquamarine;
            display: inline;
            padding: 5px;
            width: 75px;
        }
    </style>
</head>

<body>

    <p id="hello">
        Hello
    </p>

    <h2>Hello 1</h2>
    <h2>Hello 2</h2>
    <h2>Hello 3</h2>
    <h2>Hello 4</h2>
    <h2>Hello 5</h2>

    <form method="get">
        <input type="number" name="" id="num1" placeholder="Enter first Number">
        <input type="number" name="" id="num2" placeholder="Enter second Number">
    </form>
    <button onclick="add()">ADD</button>
    <b id="result">Result: </b>

    <script src="index.js"></script>
</body>

</html>

index.js

document.getElementById('hello').className = "para";

var a = document.getElementsByTagName('h2');
for (var i = 0; i < a.length; i++) {
    a[i].className = "heading";
}

function add() {
    var num1 = document.getElementById('num1').value;
    var num2 = document.getElementById('num2').value;
    var res = num1 + num2;
    document.getElementById('result').innerHTML += res;
}