Không nhúng file javascript vào html được

Vinh_Arnold · October 30, 2016, 3:46am

lúc bê nguyên cái java vào trong html thì nó chạy đúng ,nhưng khi tách thành file riêng thì không chạy, F12 trên trình duyệt thì nó báo lỗi Uncaught TypeError: Cannot read property ‘name’ of undefined trong đó trong file js nó gạch đỏ chữ name,
đây là code của file html

<html>
	<head>
		<title>Đăng ký</title>
		<meta charset="utf-8"/>
		<link href="style.css" rel="stylesheet">
		<script src="JVS.js"></script>
	</head>
	
	<body >
		<div id="container">
		Đăng Ký
			<div id="alert">
				<div id="error" ></div>
				
			</div>
			<div id="left">
				Tên đăng nhập<br>
				Mật khẩu<br>
				Xac Nhan MK<br>
				email<br>
			</div>
			<div id="right">
				<form onsubmit="return Validate()" name="vForm" >
					<input type="text" name="name" value></input><br>
					<input type="password" name="pass" value></input><br>
					<input type="password" name="pass2" value></input><br>
					<input type="text" name="email" value></input><br>
					<input type="submit"  value="Đăng Ký"></input>
				</form>
			</div>
		</div>
	</body>
</html>

còn đây là code cảu file js

var username = document.forms["vForm"]["name"];
var email = document.forms["vForm"]["email"];
var password = document.forms["vForm"]["pass"];
var password_confirmation = document.forms["vForm"]["pass2"];

	// GETTING ALL ERROR OBJECTS
var name_error = document.getElementById("name_error");
var email_error = document.getElementById("email_error");
var password_error = document.getElementById("password_error");

	// SETTING ALL EVENT LISTENERS
username.addEventListener("blur", nameVerify, true);
email.addEventListener("blur", emailVerify, true);
function Validate(){
	// VALIDATE USERNAME
	if(username.value == ""){
		error.textContent = "Username is required";
		username.style.border = "1px solid red";
		username.focus();
		return false;		}
		// VALIDATE EMAIL
	if(email.value == ""){
		error.textContent = "Email is required";
			email.style.border = "1px solid red";
			email.focus();
			return false;
		}

		// VALIDATE PASSWORD
		if (password.value != password_confirmation.value) {
			error.textContent = "The two passwords do not match";
			password.style.border = "1px solid red";
			password_confirmation.style.border = "1px solid red";
			password.focus();
			return false;
		}

		// PASSWORD REQUIRED
		if (password.value == "" || password_confirmation.value == "") {
			error.textContent = "Password required";
			password.style.border = "1px solid red";
			password_confirmation.style.border = "1px solid red";
			password_confirmation.focus();
			return false;
		}
	}

	// ADD EVENT LISTENERS
	function nameVerify(){
		if (username.value != "") {
			error.innerHTML = "";
			username.style.border = "1px solid #110E0F";
			return true;
		}
	}

	function emailVerify(){
		if (email.value != "") {
			error.innerHTML = "";
			email.style.border = "1px solid #110E0F";
			return true;
		}
	}

huydotnet · October 30, 2016, 4:09am

Trả lời nhanh

Bạn đặt dòng code load file JS xuống cuối thẻ body là chạy được

Trả lời chi tiết

Thứ nhất: Trình duyệt hiển thị lỗi từ phía file JS, như vậy có nghĩa là file JS đã load được chớ ko phải là “ko nhúng file JS vào HTML được”

Thứ 2: Cơ chế hiển thị 1 trang web của trình duyệt là load từ trên xuống dưới, cái gì gặp trước thì xử lý trước

Thứ 3: Trình duyệt báo lỗi Cannot read property 'name' of undefined, lỗi này có nghĩa là: Không thể đọc được thuộc tính name của một đối tượng chưa được định nghĩa.

Dựa vô 3 ý trên thì bạn có thể tìm và xử lý nguyên nhân vấn đề như sau:

Đặt câu hỏi: Tại sao nó lại báo không đọc được thuộc tính name của một đối tượng chưa được define?
=> Thử tìm coi chỗ nào trong file JS tìm tới thuộc tính name, ta sẽ thấy ngay dòng đầu:

var username = document.forms["vForm"]["name"];

Trong dòng code này name là thuộc tính của đối tượng document.forms["vForm"], dựa vào thông báo lỗi thì JS không tìm thấy đối tượng form vForm

Đặt câu hỏi tiếp: Tại sao trong trang HTML rõ ràng có khai báo form vForm rồi, tại sao ko tìm thấy?

Trả lời câu hỏi này nhìn vô yếu tố thứ 2 ở trên, vậy có nghĩa là lúc trình duyệt load cái trang này ra, nó gặp đoạn include file JS trước, thế là nó load file JS ra, chạy file đó, lúc này nó chưa chạy tới khúc có thẻ <body> để load nội dung trang web tiếp, và thế là ko có gì cho nó tìm cả, vì lúc này vForm chưa được in ra trang web, vậy nên nó báo lỗi như trên.

:v

Vinh_Arnold · October 30, 2016, 8:14am

vâng ,e rất cám ơn ạ, em đã hiểu rồi