Output
Change HTML Content
- <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
- Click me to display Date and Time.</button>
-
- <p id="demo"></p>
-
- <div id = "demo"></div>
-
- <script>
- document.getElementById("demo").innerHTML = "Hello Javascript";
- </script>
-
Change HTML Attribute Values
- <img id="myImage" src="https://lin-chen-va.github.io/images/profile.jpg" style="width:100px">
-
- <button id = "myButton" type = "button" onclick="myFunction()">Click</button>
-
- <script>
- function myFunction() {
- document.getElementById("myImage").src = "https://lin-chen-va.github.io/images/Blazers.png"
- document.getElementById("myButton").innerHTML = "Changed"
- }
- </script>
-
Change HTML Styles
- <p id="demo">JavaScript can change the style of an HTML element.</p>
-
- <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
-
External JavaScript
- //myScript.js
- function myFunction()
- {
- document.getElementById("demo").innerHTML = "Hello Javascript ...";
- }
-
- <p id = "demo"></p>
- <button type="button" onclick="myFunction()">Try it</button>
-
- <script src = "myScript.js"></script>
-