محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Remove Event From Element</h1>
    <button id="myBtn">Count Clicks</button>
    <p id="result">No clicks yet.</p>

    <script>
		// count عدد النقرات سنخزنه في المتغير
		let count = 0;

		// myBtn في متغير إسمه myBtn يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
		let myBtn = document.querySelector('#myBtn');

		// result في متغير إسمه result يساوي id هنا قمنا بتخزين العنصر الوسم الذي يملك
		let result = document.querySelector('#result');
		
		// مهمتها طباعة عند النقرات على الزر showCount هنا قمنا بتعريف دالة إسمها
		function showCount() {
			// count أولاً تقوم بإضافة واحد على عدد النقرات الذي نحتفظ فيه المتغير
			count++;
			// result و من ثم تقوم بعرض قيمته في الوسم الذي يمثله المتغير 
			result.innerHTML = 'Total clicks = ' + count;
			// من الزر click أكبر أو تساوي 3 فإنه سيتم إزالة الحدث count عندما تصبح قيمة
			if (count >= 3) {
				myBtn.removeEventListener('click', showCount);
			}
		}

		// myBtn للعنصر الذي يمثله المتغير click هنا قمنا بإضافة الحدث
		// مع تمرير إسم الدالة التي سيتم تنفيذها عند حصول الحدث 	
		myBtn.addEventListener('click', showCount);
	</script>
</body>
</html>