What you are going to do?
Write a JavaScript program to collect name in HTML input and print name with hello
Example: Input = Niyas
Result = Hello Niyas
What you will learn?
How to catch input text value from an HTML input element?
How to run JavaScript when button pressed?
how to change inner text value of an HTML element?
How to catch input text value from an HTML input element?
HTML
<input type="Your Name" name="name" id="name" value="Your Name">JavaScript
var givenName = document.getElementById("name").value; The Document method getElementById() returns an Element object representing the element whose id property matches the specified string
How to run JavaScript when button Pressed?
HTML
<button type="button" name="button" onclick="printname()">Click here</button>JavaScript
function printname(){
var giveName = document.getElementById("name").value;
}How to change inner text of an HTML element
HTML
<label id="printHello"></label>JavaScript
document.getElementById("printHello").innerHTML = "Hello" + giveName;Full Code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<label> Name : </label>
<input type="Your Name" name="name" id="name" value="Your Name">
<button type="button" name="button" onclick="printname()">Click here</button>
<label id="printHello"></label>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
JavaScript
function printname(){
var giveName = document.getElementById("name").value;
document.getElementById("printHello").innerHTML = "Hello" + giveName;
}Result:
Commentaires