Look at the Example First:
<!--Dynamic web page-->
<!DOCTYPE html>
<html>
<head>
<title>JavascriptIntro</title>
<script type = "text/javascript">
function addPragraphText(){
document.getElementById("para").innerHTML = "You are successfully signed in!"
}
</script>
</head>
<body>
<H1 style="color:blue">Registration Form</H1>
<button onClick = "addPragraphText();">Sign up</button>
<p id="para"></p>
</body>
</html>
Explanation:
This is a basic sample of javascript. When a button of "Sign up" is clicked , it shows the message that you are successfully sign up. This can be done by using following concept:
- Here we need to use <script> tag to work with javascript in the header section.
- "type" is the attribute of script tag.
- This type attribute is assigned by "text/javascript", as the basic syntax.
- Now inside the script tag, we need to create a function by using keyword "function". That function is named as "addParagraphText()", means when a button is clicked we need to show a paragraph text.
- Now inside the function body we are assigning the element by name "para"(its your choice) and that element is assigned some text that we want to show on click. To do so the basic syntax is: documet.getElementById("IdOfText").innerHTML="Some Text"
- Here document is object and getElementById( ) is the built in function where as innerHTML is the property of the function.
- We are done with body of function.
- Now inside the body tag we need to create a button tag, and that button tag has attribute "onClick".
- Let's assign "onClick" to function that that we have created earlier "addParagraphText()" and then Name that button you want to show in site, say "Sign up"
- Now Inside the paragraph body , we do not need to write any para, but just write down that Id that we have created earlier in the function.
- That's it. We are done.
- You may check the above code.
0 Comments