<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">
var name, leng_name,str;
//입력
name = prompt('이름을 입력해주세요');
//처리
leng_name = name.length;
str = '<div > <h2>What is the input string? <p id="display_name">'+ name
+'<br> '+ name + ' has</p></h2> <p id="display_name_count">' +leng_name + ' </p>charaters </div>';
//출력
$(document).ready(function(){
//처리
//텍스트 박스의 내용이 입력되었을때
$('#name').change(function(){
//디브 - h2 - p의 내용이 변경되어야 한다. 이름 / 이름의 수
name = $('#name').val();
leng_name = name.length;
$('#display_name').text(name);
$('#display_name_count').text(leng_name);
})
//출력
$('#foo').append(str);
});
</script>
</head>
<body>
<div id="foo">
<input type="text" id="name">
</div>
</body>
</html>
댓글 없음:
댓글 쓰기