Lỗi Cannot set property 'innerText' of null

Em mới học lập trình javascript. Em có tạo 1 hàm mà bị lỗi ở theKetqua.innerText =tong; e ko b vì sao mn có thể sửa giúp với ạ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> 
		#soA{
			color: red;
		}
	</style>
</head>
<body>
	<input type="text" id="soA">
	<input type="text" id="soB">
	<button onclick="tinhTong()">Tinh Tong</button>
	<h2 id="ketqua"></h2>
	<script type="text/javascript">
		function tinhTong() {
			var theInputA = document.querySelector('#soA');
			var theInputB = document.querySelector('#soB');
			var theKetqua = document.querySelector('#Ketqua');
			var tong = Number(theInputA.value) + Number(theInputB.value);

			theKetqua.innerText =tong;
		}

	</script>
</body>
</html>

Bạn define cái id là “ketqua”

<h2 id="ketqua"></h2>

Nhưng lúc select thì lại là “Ketqua”

var theKetqua = document.querySelector('#Ketqua')

Đổi sửa cái selector ở dưới thành “ketqua” là được

Điểm cần nhớ:

Trong trường hợp thế này mình phải tìm cách debug, cách đơn giản nhất là in cái giá trị của theKetqua ra ngoài console.

console.log(theKetqua)
4 Likes

Trong lập trình thì hầu hết các ngôn ngữ phân biệt cực gắt về HOA-thường nên chú ý nhé.

1 Like

ở đoạn code có lấy query là ‘#Ketqua’:

nhưng trong html có element dùng ‘#ketqua’:

<h2 id=“ketqua”></h2>

rõ ràng là một cái hoa với một cái thường thì không chạy là phải. Bạn nên nhớ rằng:

Class không phân biệt Hoa-thường nhưng Id thì có. Vì thế người ta hay dùng class cho css và dùng id cho js vì code js cần có sự chắc chắn

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?