[독학생].. textarea에 코드짜서 결과를 내려고 합니다...
본문
코딩 연습으로 현재는 메모장에 긁적이구 있습니다. 매번 메모장에 하려니 복잡하고 정리가 잘안되서
간단하게 웹창에 코딩연습하고 결과한번보고 간편하게 텍스트영역을 만들어 보았습니다.
(웹으로 코딩을 입력하여 입력된 내용의 결과물을 제출버튼으로 새창으로 보려고합니다.)
<script>
function testmemo {
}
</script>
<form name="test">
<input type="button" value="제출"
onClick="testmemo">
<textarea cols="55" name="memo">
<!DOCTYPE html>
<html>
<head>
<title> 테스트메모장 </title>
</head>
<body>
안녕하세요.
</body>
</textarea>
앞, 뒤 마무리는 생략 하였습니다.
텍스트영역에 적힌 내용을 웹으로 보면 일반적인 코드가 나오고 편집이 가능하게 만들었습니다.
허나 결과물을 보려 (버튼클릭시) 고 하는데 새로운창 및 팝업 창에는 결과물은 나오지않네요..
하루종일 코딩 생각해보고 책보고 구글링 해도 얻지 못하여 고수님들에게 도움을 요청하고자 글을 남깁니다.
dom으로 접근을 시도해보았으나,, 코딩장에는 억지로 제가 연습코드장을 만든거고 웹의 입력내용을 복사하여 자식노드로 빼놔야하는지,, if함수를 걸어야 하는지.. 어렵게 도움을 요청해봅니다.. ㅠㅠ
답변 2
코딩 연습장 페이지를 직접 만드려는 것 같은데.. 쉽지 않으니..
코딩 연습장으로 활용할 수 있는 사이트 이용을 추천드립니다.
HTML 코드, 스크립트 코드 영역에 코드를 입력한 후, 좌측 상단에 [Run] 을 결과를 확인해 볼 수 있고..
저장, 공유 등도 편하게 할 수 있습니다.
새 창으로 결과보기는 저도 잘 모르겠습니다.
같은 창 내에서는 다음과 같이 하면 됩니다.
<form name="test">
<input type="button" value="제출" onclick="testmemo()">
<textarea id='t_area1' cols="55" name="memo">
<body>
<span style="color:red">안녕하세요.</span>
</body>
</textarea>
<br><br>
<div id="d_area1" style="width:100%;height:200px;border:1px solid red">
</div>
</form>
<script>
function testmemo() {
var t = document.getElementById('t_area1');
var d = document.getElementById('d_area1');
d.innerHTML = t.value;
}
</script>