What Can You Do with JavaScript? Explore Its Capabilities

Tutorial

JS Basic Tutorial

Introduction

Versions of Javascript

How to add javascript

JavaScript Operators

JS Arithmetic Operators

JS Assignment Operators

JS Comparison Operators

JS Logical Operators

JS Ternary Operator

JS Bitwise Operators

JS Type Operators

JS String Operators

JS Nullish Coalescing Operator

JS Optional Chaining Operator

What Can You Do

❮ Previous

Next ❯

1. Modify HTML Content Dynamically

JavaScript can change or update the content of HTML elements after the page has been loaded.

Example

<!DOCTYPE html>

<html>

<head>

<title>Can Change Html Content</title>

</head>

<body>

<p id="myText">Original Text</p>

<button onclick="document.getElementById('myText').innerHTML = 'Updated Text!'">Change Text</button>

document.getElementById("myText").innerHTML = "New Text!";

</script>

</body>

</html>

Try it yourself

2. Can change html attribute values

JavaScript can change or update the attributes of HTML elements.

Example

<!DOCTYPE html>

<head>

function modify() {

// Update style attribute of element "heading"

let heading = document.getElementById("heading");

heading.setAttribute("style", "color:green");

}

</script>

</head>

<body>

WhereisStuff

</h1>

Click to modify

</button>

</body>

</html>

Try it yourself

3. Style Manipulation (CSS Styling)

JavaScript can dynamically change the style of HTML elements by modifying CSS properties.

Example

<!DOCTYPE html>

<html>

<head>

<title>Can Change CSS Property</title>

<style>

.highlight { background-color: yellow; }

</style>

</head>

<body>

<div id="myElement" class="box">Click me</div>

<button onclick="document.getElementById('myElement').classList.toggle('highlight')">Toggle Highlight</button>

document.getElementById("myElement").style.color = "blue";

</script>

</body>

</html>

Try it yourself

4. Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style

Example

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>

</html>

Try it yourself

5. Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style

Example

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>

</html>

Try it yourself

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.