[Share Code] Tìm hiểu về event trong Javascript + Tương tác tags trong HTML bằng Javascript

#vidu.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Event & Xu ly Tag bang Javascript</title>

	<style type="text/css">
		.main {
			background-color: #6fd4f2;
			width: 600px;
			margin: 0px auto;
			padding: 20px;
		}

		.item {
			display: flex;
			margin-bottom: 20px;
			width: 100%;
		}

		.item label {
			width: 15%;
			text-align: right;
			padding-right: 10px;
		}

		.item input {
			width: 85%;
		}
	</style>
</head>
<body onload="init()">
	<div class="main">
		<div class="item">
			<label>Fullname: </label>
			<input type="text" name="fullname" id="fullname_id" placeholder="Enter fullname" onchange="changeFullname()" style="background-color: yellow;">
		</div>
		<div class="item">
			<label>Age: </label>
			<input type="number" name="age" id="age_id" placeholder="Enter age">
		</div>
		<div class="item">
			<label>Email: </label>
			<input type="email" name="email" id="email_id" placeholder="Enter email">
		</div>
		<div class="item">
			<label>Address: </label>
			<input type="text" name="address" id="address_id" placeholder="Enter address">
		</div>
		<div class="item">
			<label></label>
			<button type="submit" onclick="clickSaveData()">Save Data</button>
		</div>
		<div class="item" id="result_basic" style="display: block;">
			<div id="group1">
				<p id="dong1" onclick="deleteThisDong1(this)">dong 1</p>
				<button onclick="deleteDong1()">Xoa Dong 1</button>
				<button onclick="this.parentElement.remove()">Xoa Het</button>
			</div>
			<div>
				<p id="dong2" onclick="this.remove()">dong 2</p>
				<button onclick="deleteDong2()">Xoa Dong 1</button>
				<button onclick="this.parentElement.remove()">Xoa Het</button>
			</div>
			<div>
				<p id="dong3">dong 3</p>
				<button onclick="deleteDong3()">Xoa Dong 1</button>
				<button onclick="this.parentElement.remove()">Xoa Het</button>
			</div>
		</div>
		<table border="1" cellpadding="3" style="width: 100%;">
			<thead>
				<tr>
					<th>No</th>
					<th>Fullname</th>
					<th>Age</th>
					<th>Email</th>
					<th>Address</th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody id="result"></tbody>
		</table>
	</div>

<script type="text/javascript">
	// event
	var index = 0

	function deleteThisDong1(deleteTag) {
		deleteTag.remove()
	}

	function deleteDong1() {
		tag = document.getElementById('dong1')
		tag.remove()
	}

	function deleteDong2() {
		tag = document.getElementById('dong2')
		tag.remove()
	}

	function deleteDong3() {
		tag = document.getElementById('dong3')
		tag.remove()
	}

	function clickSaveData() {
		console.log("click save data...")
		//3. Xu ly noi dung tag trong html
		//3.1 Lay noi dung trong the input
		fullnameTag = document.getElementById('fullname_id')
		ageTag = document.getElementById('age_id')
		emailTag = document.getElementById('email_id')
		addressTag = document.getElementById('address_id')

		// console.log(fullnameTag.value)
		// console.log(ageTag.value)
		// console.log(emailTag.value)
		// console.log(addressTag.value)

		addressTag.value = "Xin Chao " + fullnameTag.value

		//3.2 Thay doi noi dung cua 1 the bat ky -> khong phai la the input
		// resultBasicTag = document.getElementById('result_basic')
		// console.log(resultBasicTag.innerHTML)
		// resultBasicTag.innerHTML += fullnameTag.value
		// resultBasicTag.innerHTML += fullnameTag.value + '<br/>'
		// resultBasicTag.innerHTML += `<p style='color: white'>${fullnameTag.value}</p>`

		resultTag = document.getElementById('result')
		resultTag.innerHTML += `<tr>
					<td>${++index}</td>
					<td>${fullnameTag.value}</td>
					<td>${ageTag.value}</td>
					<td>${emailTag.value}</td>
					<td>${addressTag.value}</td>
					<td><button>Edit</button></td>
					<td><button>Delete</button></td>
				</tr>`
	}

	function changeFullname() {
		console.log("change fullname ...")
		//3. Xu ly noi dung tag trong html
		//3.1 Lay noi dung trong the input
		fullnameTag = document.getElementById('fullname_id')
		// ageTag = document.getElementById('age_id')
		// emailTag = document.getElementById('email_id')
		// addressTag = document.getElementById('address_id')

		console.log(fullnameTag.value)
	}

	function init() {
		//code bat dau xu ly -> sau khi website load thanh cong
		//lay the tag html -> bang javascript -> 4 cach thong thuong hay dung.
		//1. Lay thong qua ID
		fullnameTag = document.getElementById('fullname_id')
		console.log(fullnameTag.name)
		console.log(fullnameTag.id)
		console.log(fullnameTag.placeholder)
		console.log(fullnameTag.type)
		console.log(fullnameTag.onchange)

		fullnameTag.placeholder = "Enter fullname testing ..."
		fullnameTag.title = "Xin chao ban!!!"

		fullnameTag.style.color = 'red'
		fullnameTag.style.backgroundColor = 'pink'
		fullnameTag.style.fontSize = '30px'

		//2. Lay tag thong qua tagname
		inputList = document.getElementsByTagName('input')
		// inputList = document.getElementsByClassName('classname')
		console.log(inputList)

		for (var i = 0; i < inputList.length; i++) {
			inputList[i].style.color = 'blue'
		}
	}
</script>
</body>
</html>

[Share Code] Tìm hiểu về event trong Javascript + Tương tác tags trong HTML bằng Javascript

#vidu.html

Tags:

Phản hồi từ học viên

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó