event

2023. 12. 31. 14:26ㆍDaily Codig Reminder 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  var itemList = [];
   window.onload = function(){
      document.querySelector("#allCheck").
      addEventListener("click", check,false);
       document.querySelector("#test").
      addEventListener("click", view,false);
    }
    function view(){
		var fruits = document.querySelectorAll(".fruits:checked");
		console.log(fruits);
		var result ="";
		for (var i =0; i < fruits.length; i++){
			var fu="";
			if(fruits[i].checked){
				fu= fruits[i];
				result+= fu.value+"&nbsp;&nbsp;&nbsp;";
			}
			console.log(result);
			document.querySelector("#result").innerHTML=result;
		}
	}
	function check(){
		var fruits =document.querySelectorAll(".fruits");
		for(var i =0; i<fruits.length; i++){
			fruits[i].checked =this.checked;
		}
	}
	function views(){
		var fruits =document.querySelectorAll(".fruits");
			fruits.addEventListener("click",function(){
			console.log("a click");
		}, false);
	}
</script>
</head>
<body>
	전체선택 <input type="checkbox" name="allCheck" id="allCheck"><br>
	<hr>
사과<input type="checkbox" name="fruits" class="fruits" value="사과"><br>
수박<input type="checkbox" name="fruits" class="fruits" value="수박"><br>
바나나<input type="checkbox" name="fruits" class="fruits" value="바나나"><br>
오렌지<input type="checkbox" name="fruits" class="fruits" value="오렌지"><br>
<button id="test" >확인</button><br>
<span id="result"></span>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
			var itemList = [];
	window.onload = function(){

		var addBtr = document.querySelector("#add");
		addBtr.addEventListener("click",addList);
		
		}
	function addList(){
		var item = document.querySelector("#item").value;
		if(item!= null){
			itemList.push(item);
			document.querySelector("#item").value="";
			document.querySelector("#item").focus();
		}
		showList();
		console.log(itemList);
		
	}
	function showList(){
		var list ="<ul>";
			for (var i =0; i <itemList.length; i++){
				console.log(itemList[i]);
				list +="<li>"+itemList[i]+"&nbsp;<span class='close' id"+i+">X</span></li>"
			}
			list+= "</ul>";
			console.log(list);
			document.querySelector("#itemList").innerHTML=list;
			var remove = document.querySelectorAll(".close");
			for (var i =0; i < remove.length; i++){
				remove[i].addEventListener("click",removeList)
			}
	}
	function removeList(){
		var id= this.id;
		console.log("remove List id===="+id);
		itemList.splice(id, 1); //id번호중 1개 삭제
		showList();
	}
</script>
</head>
<body>
<form>
	<input type="text" id="item" autofocus>
	<button type="button" id="add" class="button">
		추가
	</button><br>
	<div id="itemList"></div>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		
	window.onload = function(){
		document.querySelector("#vi").addEventListener("click",setView);
		document.querySelector("#unvi").addEventListener("click",unsetView);

	
		}
function setView(){
		var image = document.querySelector("#images");
		
		image.style.visibility="visible"
		//image.style.display="block"
	}
	function unsetView(){
		var image = document.querySelector("#images");
		image.style="visibility:hidden"
		//image.style.display="none"
	}
	
</script>
</head>
<body>
<form>
	<input type="button" id="vi" value="보이기" onclick="setView()"><br>
	<input type="button" id="unvi" value="감추기" onclick="unsetView()"><br>
		
	
	<img id="images" src="../image/a.jpg">
	<div>dummy</div>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		
	window.onload = function(){
		document.querySelector("#vi").addEventListener("click",setView);
		document.querySelector("#unvi").addEventListener("click",unsetView);

	
		}
function setView(){
		var image = document.querySelector("#detail h3");
	image.style.display="block"
	}
	function unsetView(){
		var image = document.querySelector("#detail h3");//한칸 띄우면 후손 detail의 h3
		image.style.display="none"
	}
	
</script>
</head>
<body>
<form>
	<input type="button" id="vi" value="보이기" onclick="setView()"><br>
	<input type="button" id="unvi" value="감추기" onclick="unsetView()"><br>
		
	
	<img id="images" src="../image/a.jpg">
	<div id="detail">
		<h1>아래 내용이 숨겨집니다</h1>

    <h3>
        <font color="red">다음과 같은 내용이 숨겨지게 됩니다. </font>
    </h3>
	</div>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		
	window.onload = function(){
		document.querySelector("#vi").addEventListener("click",setView);
		document.querySelector("#unvi").addEventListener("click",unsetView);

	
		}
function setView(){
		var image = document.querySelector("#detail h3");
	image.style.display="block"
	image.addEventListener("click",function(){
			console.log("a click");
				}, false);
	}
	function unsetView(){
		var image = document.querySelector("#detail h3");//한칸 띄우면 후손 detail의 h3
		image.addEventListener("click",function(){
			console.log("a click");
				}, false);
		image.style.display="none"
	}
	
</script>
</head>
<body>
<form>
	<input type="button" id="vi" value="보이기" ><br>
	<input type="button" id="unvi" value="감추기" ><br>
		
	
	<img id="images" src="../image/a.jpg">
	<div id="detail">
		<h1>아래 내용이 숨겨집니다</h1>

    <h3>
        <font color="red">다음과 같은 내용이 숨겨지게 됩니다. </font>
    </h3>
	</div>
</form>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
		
	window.onload = function(){
	image= document.querySelector("#images");
	image.addEventListener("click", aaa);
	image.addEventListener("mouseout", ccc);
	image.addEventListener("mouseover",bbb);

		}
function aaa(){
		image.src= src="../image/b.jpg";
	}
function bbb(){
		image.src= src="../image/c.jpg";
	}
function ccc(){
		image.src= src="../image/d.jpg";
	}	
	
</script>
</head>
<body>
	<img id="images" src="../image/a.jpg">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload= function(){
		document.getElementById("update")
		.addEventListener("click", update, false);
		document.getElementById("delete")
		.addEventListener("click", del, false);
		document.getElementById("sendForm")
		.addEventListener("click", sendForm, false);
		document.getElementById("send")
		.addEventListener("click", send, false);
	}
	function update(){
		var myForm = document.getElementById("myForm");
		myForm.action ="update.html";
		event.preventDefault();
	}
	//function del(){
		//var myForm = document.getElementById("myForm");
		//myForm.action ="delete.html";
		//event.preventDefault();
	//}
	function sendForm(){
		var myForm = document.getElementById("myForm");
		myForm.action ="send.html";
		
	}
	function send(){
		console.log("================")
		var myForm = document.getElementById("myForm");
		myForm.action ="send.html";//여기까지 전송안됨
		myForm.submit(); //강제로 submit 이벤트 실행, 폼데이터 넘어감
	}
	function del(){
        var mtForm = document.getElementById('myForm');
        myForm.action = "delete.html";
        var id = document.getElementById('userid').value;
        var pw = document.getElementById('passwd').value;

        if(id.length==0 || pw.length==0){
            alert('아이디 비밀번호를 확인해주세요')
            event.preventDefault();
        }
    }
    function test(){
		event.preventDefault();
		alert("=======================")
		var userid = document.querySelector("#id").value;
		var pw = document.querySelector("#pw").value;
		location.href= "target.html?userid="+userid+"&passwd="+pw;
	}
</script>
</head>
<body>
<form action="#" id="myForm">
	아이디 <input type="text" name="userid"><br>
	비밀번호 <input type="text" name="passwd"><br>
	<button id="update">수정</button>
	<button id="delete">삭제</button>
	<button id="sendForm">전송</button>
	<button onclick="test()">버튼 inline방식</button>
</form>
<hr>
폼의 바깥
<button id="send">전송2</button>
</body>
</html>

http:// localhost:8085/JavaScript/11Event2_form/send.html?userid=aa&passwd=11

 

 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript">

		window.onload = function () {
			document.getElementById("update")
				.addEventListener("click", update, false);//update버튼에 update함수 등록
			document.getElementById("delete")
				.addEventListener("click", del, false);
			document.getElementById("sendForm")//폼안의 send버튼 
				.addEventListener("click", sendForm, false);

			/* 폼의 바깥 send버튼  */
			document.getElementById("send")
				.addEventListener("click", send, false);
		};//end onload


		function send() {
			//폼의 바깥 send버튼 
			console.log("zzz=================");
			var myForm = document.getElementById("myForm");
			myForm.action = "send.html";  //여기까지 전송안됨 
			myForm.submit();  //주의 강제로 submit실행 , 폼데이터 넘어감. 
		}

		function sendForm() {

			var myForm = document.getElementById("myForm");
			myForm.action = "send.html";
			//폼의 안쪽
			//myForm.submit();  
		}

		function update() {
			var myForm = document.getElementById("myForm");//form 얻기 	
			myForm.action = "update.html"; //form의 action 지정 	 
			//event.preventDefault(); //이벤트 정지 		
		}




		function del() {
			 var myForm = document.getElementById("myForm");
       		 myForm.action = "delete.html";

	        var id = document.getElementById("id").value;
	        var pw = document.getElementById("pw").value;
	
	            if(id.length==0 || pw.length==0){
		            alert('아이디 비밀번호를 확인해주세요')
		            event.preventDefault();
       			 }
		}

		function test() {
			event.preventDefault();//주의  !!!!! submit 이벤트 중지 후 페이지 이동
			alert("===============");
			//단 데이터는 전달되지 않음
			var userid= document.querySelector("#id").value;
			var pw= document.querySelector("#pw").value;
			//데이터를 직접 붙여서 전송함 
			location.href = "target.html?userid="+userid+"&passwd="+pw;
		}
	</script>
</head>

<body>
	<form action="#" id="myForm"><!-- action에 페이지 지정 없음, id지정  -->
		아이디<input type="text" name="userid" id="id"><br>
		비밀번호<input type="text" name="passwd" id="pw"><br>
		<button id="update">수정</button>
		<button id="delete">삭제</button>
		<button id="sendForm">전송</button>
		<button onclick="test()">버튼 inline방식</button>
	</form>
	<hr>
	폼의 바깥
	<button id="send">전송</button><!-- send.html -->
</body>

</html>

'Daily Codig Reminder' 카테고리의 다른 글

servlet 2 + my batis  (1) 2024.01.02
servlet  (0) 2023.12.31
DOM, EVENT  (0) 2023.12.24
함수,객체, DOM  (1) 2023.12.24
jsp- 연산자 , 문장, 함수  (0) 2023.12.24

관련글

티스토리툴바