JavaScript Can Change HTML Content
One of many HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":
Example
<!DOCTYPE html><html><body><h1>What Can JavaScript Do?</h1><p id="demo">JavaScript can change HTML content.</p><button type="button"onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button></body></html>
Output :
On Click Me Action :
JavaScript Can Change HTML Attributes
<!DOCTYPE html><html><body><h1>JavaScript Can Change Images</h1><img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"><p>Click the light bulb to turn on/off the light.</p><script>function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { image.src = "pic_bulboff.gif"; } else { image.src = "pic_bulbon.gif"; }}</script>
JavaScript Can Change HTML Styles (CSS)
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript Can Validate Data
<!DOCTYPE html><html><body><h1>JavaScript Can Validate Input</h1><p>Please input a number between 1 and 10:</p><input id="numb" type="number"><button type="button" onclick="myFunction()">Submit</button><p id="demo"></p><script>function myFunction() { var x, text; // Get the value of the input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text;}</script></body></html>
JavaScript and Java are completely different languages, both in concept and design.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name. ECMAScript 6 (released in June 2015) is the latest official version of JavaScript.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name. ECMAScript 6 (released in June 2015) is the latest official version of JavaScript.
0 comments:
Post a Comment