출처: https://youngjinmo.github.io/2020/04/change-value-by-javascript/

 

JS로 텍스트 값을 바꾸는 2가지 방법

오늘 면접을 한 곳 보고왔는데, 이 때 받은 손코딩 문제중에 하나를 기억하고자 남기려고 한다. 사실 코딩 테스트라고 하기엔 좀 쉬운 문제였는데, 긴장을 해서인지 이것조차 못풀고온게 찝찝해

youngjinmo.github.io

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
	// document : DOM객체들이 포함한 문서객체 (body에 있는 객체들)
	// .ready() : 준비가 되면 즉, 로딩이 되면
	// function(){} : 호출할 익명함수..
	$(document).ready( function(){
		// $("선택자").text("출력할 문자열");
		$('h2').text("jquery 시작");
			
	});
	
	$(document).ready( function(){
		// $("선택자").text("출력할 문자열");
		$("h3").text("jquery 시작2");
			
	});
	
	
	$(document).ready( function(){
	$("#jqueryBtn").click(function(){
		  $(".quiz-text").text("Javascript");
		  $(".quiz-text").css('color', 'blue');
		});
	});
	
	$(document).ready( function(){
	$("#change00").click(function() {
		$('.change01').text("바뀌기후1");
		$('.change02').text("바끼기후2");
	});
	});
	
	$(document).ready( function(){
		$("#change01").click(function() {
			$('.change01').text("바뀌기전1");
			$('.change02').text("바끼기전2");
		});
		});
	
</script>
</head>
<body>
	<h2></h2>
	<h3></h3>
	<button type = "button" id= "change00">change</button> <button type = "button" id= "change01">return</button> 
	<h4 class = "change01">바뀌기전1</h4>
	<h4 class = "change02">바뀌기전2</h4>
	
    <p>
      당신이 공부하는 언어는 <span class="quiz-text">Java</span>입니까?
    </p>
    <button id="jqueryBtn" type="button" id="changeByjQuery()">Run by jQuery</button>
  
  </body>
</html>

버튼클릭 전 
버튼 클릭 후 

 

+ Recent posts