Javascript - date, time, button, onclick, and innerHTML

Javascript

JavaScript is one of 3 basic components for web developments:

HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages

In this chapter, we'll see how JavaScript works with HTML and CSS.

First javascript

Here is our first javascript sample:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('date_time_button').innerHTML = Date()">
Click and see Date and Time.</button>

<p id="date_time_button"></p>

</body>
</html>

innerHTML

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

Return the innerHTML property:
```
HTMLElementObject.innerHTML
```
Set the innerHTML property:
```
HTMLElementObject.innerHTML=text
```

The example below will change p element when clicked:

<body>

<p id="innerHTML_demo" onclick="myFunction()">Click me to change content (innerHTML).</p>

<script>
function myFunction() {
    document.getElementById("innerHTML_demo").innerHTML = "Changed!";
}
</script>

</body>
</html>

The following example fires up alert when a button is clicked:

<!DOCTYPE html>
<html>
<body>

<p id="innerHTML_demo">Click me to alert.</p>

<button onclick="myFunction()">Fire Alert</button>

<script>
function myFunction() {
    alert(document.getElementById("innerHTML_demo").innerHTML);
}
</script>

</body>
</html>

The method document.getElementById() is one of many methods in the HTML DOM.

The one delete p element when a button is clicked:

<!DOCTYPE html>
<html>
<body>

<p id="innerHTMLdemo">Click the button to delete me (innerHTML).</p>

<button onclick="myFunction()">DeleteMe</button>

<script>
function myFunction() {
    document.getElementById("innerHTMLdemo").innerHTML = "";
}
</script>

</body>
</html>

The one delete p element when a button is clicked:

<!DOCTYPE html>
<html>
<body>
 
<a id="AnchorChange" href="//www.google.com">google</a>
<button onclick="myFunction()">Change link</button>
 
<script>
function myFunction() {
    document.getElementById("AnchorChange").innerHTML = "bogotobogo.com";
    document.getElementById("AnchorChange").href = "http://www.bogotobogo.com";
    document.getElementById("AnchorChange").target = "_blank";
}
</script>

</body>
</html>

We can use JavaScript to:

Change HTML elements
Delete HTML elements
Create new HTML elements
Copy and clone HTML elements

javascript can change HTML elements

The HTML DOM (the Document Object Model) is the standard for accessing HTML elements. As we saw in the examples above, JavaScript can manipulate the DOM (change HTML contents).

Here is another example:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is powerful</h1>

<p>JavaScript can change the HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="power_of_javascript_demo">The power of Javascript.</p>

<script>
function myFunction() { 
    document.getElementById("power_of_javascript_demo").innerHTML = "JavaScript, you're powerful!";
}
</script>

</body>
</html>

Javascript can change the style in css:

<!DOCTYPE html>
<html>
<body>

<h1>CSS & JavaScript</h1>

<p id="css_demo">JavaScript can change the css style of an HTML element.</p>

<script>
function myFunction() {
    var x = document.getElementById("css_demo");
    x.style.fontSize = "20px";           
    x.style.color = "green"; 
}
</script>

<button type="button" onclick="myFunction()">Click Me</button>

</body>
</html>

Javascript can can be used to validate an input:

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 1 and 100:</p>

<input id="integer" type="number">

<button type="button" onclick="myFunction()">Submit</button>

<p id="validation_demo"></p>

<script>
function myFunction() {
    var val, msg;

    // Get the value of input field with id="numb"

    val = document.getElementById("integer").value;

    // If x is Not a Number or less than one or greater than 10

    if (isNaN(val) || val < 1 || val > 100) {
        msg = "Input is not valid";
    } else {
        msg = "Input is OK";
    }
    document.getElementById("validation_demo").innerHTML = msg;
}
</script>

</body>
</html>