By GokiSoft.com|
15:36 10/01/2022|
Học JS
[Video] Hướng dẫn tìm hiểu Javascript trong JS - Mapping Tag HTML <-> Object trong JS
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Events in Javascript</title>
<style type="text/css">
.container {
width: 500px;
background-color: orange;
padding: 15px;
margin: 0px auto;
margin-bottom: 20px;
}
.container input {
width: 100%;
font-size: 16px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1 id="title_id" title="Tieu de Welcome..." style="color: black; font-size: 14px">Welcome to learn JS</h1>
<form method="post">
<input required type="text" name="fullname" id="fullname_id" class="form-control" placeholder="Enter full name">
<input required type="tel" name="phone_number" id="phone_number_id" placeholder="Enter phone number">
<input required type="text" name="zipCode" id="zip_code_id" placeholder="Enter Zip Code">
<input required type="text" name="fax" id="fax_id" placeholder="Enter Fax">
<button type="button" onclick="onSubmit()">Submit</button>
<button type="reset">Reset</button>
</form>
<div id="result">
<p>Xin Chao</p>
</div>
</div>
<script type="text/javascript">
function onSubmit() {
console.log('testing ...')
//B1. Lam the nao -> Mapping Tag (HTML) <-> Object (js)
//C1. Mapping Tag (HTML) <-> Object JS -> Thong qua gia tri ID cua tag do
//For example: fullname_id, phone_number_id, zip_code_id, fax_id, title_id
var titleTag = document.getElementById('title_id')
console.log(titleTag.title)
console.log(titleTag.id)
//style -> object trong js
titleTag.style.color = 'blue'
titleTag.style.fontSize = '30px'
titleTag.style.textAlign = 'center'
titleTag.title = 'Xin Chao'
//Mapping input (HTML) <-> Object JS
var fullnameTag = document.getElementById('fullname_id')
var phoneTag = document.getElementById('phone_number_id')
var zipCodeTag = document.getElementById('zip_code_id')
var faxTag = document.getElementById('fax_id')
//Chu y: input -> thuoc tinh quan trong -> value
fname = fullnameTag.value
phone = phoneTag.value
zipCode = zipCodeTag.value
fax = faxTag.value
console.log('fullname = ' + fname)
console.log('phone = ' + phone)
console.log('zipCode = ' + zipCode)
console.log('fax = ' + fax)
//B1. Mapping div result (html) <-> object js
var resultTag = document.getElementById('result')
// console.log(resultTag.innerHTML)
//Sua toan bo noi dung ben trong
// resultTag.innerHTML = `<p>fullname: ${fname}, phone: ${phone}, zipCode: ${zipCode}, fax: ${fax}</p>`
//Chen them noi dung vao trong the
resultTag.innerHTML += `<p>fullname: ${fname}, phone: ${phone}, zipCode: ${zipCode}, fax: ${fax}</p>`
}
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
