코딩 연습으로 현재는 메모장에 긁적이구 있습니다. 매번 메모장에 하려니 복잡하고 정리가 잘안되서
간단하게 웹창에 코딩연습하고 결과한번보고 간편하게 텍스트영역을 만들어 보았습니다.
(웹으로 코딩을 입력하여 입력된 내용의 결과물을 제출버튼으로 새창으로 보려고합니다.)
<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개 / 댓글 4개
코딩 연습장 페이지를 직접 만드려는 것 같은데.. 쉽지 않으니..
코딩 연습장으로 활용할 수 있는 사이트 이용을 추천드립니다.
HTML 코드, 스크립트 코드 영역에 코드를 입력한 후, 좌측 상단에 [Run] 을 결과를 확인해 볼 수 있고..
저장, 공유 등도 편하게 할 수 있습니다.
답변에 대한 댓글 1개
새 창으로 결과보기는 저도 잘 모르겠습니다.
같은 창 내에서는 다음과 같이 하면 됩니다.
<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>답변에 대한 댓글 3개
[code]
function testmemo() {
window.open('','_blank');
var t = document.getElementById('t_area1');
같은 형식으로 윈도우 함수는 변수걸어줄수 없을까요?
w.innerHTML = t.value; // 예를 들어 이런식?
}
[/code]
function testmemo() {
var t = document.getElementById('t_area1');
//var d = document.getElementById('d_area1');
var w = window.open('', 'new_w');
//d.innerHTML = t.value;
w.document.write(t.value);
}
[/code]
답변을 작성하려면 로그인이 필요합니다.
어제 하루죙일 하다보니 오기가 생겨서 그런대... 결과물(안녕하세요) 만 클릭시 웹창에 내려고합니다.
예를 들어 간단한 표? 아니면 텍스트? 등 결과물만 보고싶은대 어려울까요 ㅎㅎ.. 정답을 알고싶은것 보다 접근방법을 알고싶은데,, 제 머리론 한계에 부딪혔습니다 ㅠ 현재 웹에 코딩은 가능한대 onclick (버튼클릭) 뒤로 펑션에서 막혔네요 ㅠㅠ