IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




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

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

by GokiSoft.com - 20:08 29/11/2021 1,238 Lượt Xem

#vidu.html


<!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>


Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!