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