Javascript 자바스크립트 clone 질문드립니다.
글쓴이: littleapple3 / 작성시간: 월, 2016/01/25 - 9:37오전
과제를 하는 중에 막혀서 여기에 도움 청하고자 질문 올립니다.
매칭게임이라고 해서 한 화면을 좌우로 css를 이용해서 나누고, 왼쪽과 오른쪽을 같게 만드는 자바스크립트를 짜는 중입니다.
과제힌트에는 클론노드를 이용하라고 나와있는데, 어디에서 시작을 해야될지 잘 모르겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position:absolute;
}
div {
position: absolute;
width: 500px;
height:500px;
}
#leftside {
float: left;
}
#rightside {
float:right;
left: 500px;
border-left: 1px solid black;
}
</style>
<script>
//여기에 var theLeftSide = document.getElementById('leftside'); 로 시작을 하라고 하는데 그 이유를 모르겠네요 ㅠ
function generateFaces() {
for(var i=0; i<5; i++){
var img = document.createElement('img');
document.getElementById('leftSide').appendChild(img);
var position = Math.floor(Math.random() * 500);
var position1 =Math.floor(Math.random()*250);
img.src ='http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.id = 'smileImage';
img.style.top=position+"px";
img.style.right=position1+"px";
img.style.left=position1+"px";
}}
window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>바쁘신 시간 내주셔서 감사합니다
Forums:
이렇게 사용해보니 되네요.
<!DOCTYPE html> <html> <head> </head> <style> img { position:absolute; } div { position: absolute; width: 500px; height:500px; } #leftside { float: left; } #rightside { float:right; left: 500px; border-left: 1px solid black; } </style> <script language="JavaScript"> function generateFaces() { for(var i=0; i<5; i++) { var img = document.createElement('img'); var position = Math.floor(Math.random() * 500); var position1 =Math.floor(Math.random()*250); img.src ='http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png'; img.id = 'smileImage'; img.style.top=position+"px"; img.style.right=position1+"px"; img.style.left=position1+"px"; document.getElementById('leftside').appendChild(img); var img2 = img.cloneNode(true); document.getElementById('rightside').appendChild(img2); } } window.onload = generateFaces; </script> <body> <h1>Matching Game</h1> <p>Click on the extra smiling face on the left.</p> <div id="leftside" >test</div> <div id="rightside" >test</div> </body> </html>더 자세한 내용은 책을 참고해보세요.
Javascript 자바스크립트 - cloneNode() 클론노드 - 사용방법 (소문자)
어떤 예제는 CloneNode()라고. 대문자로 잘못 적혀 있으니. 주의하시기 바랍니다.
javascript clone
https://www.google.co.kr/webhp?hl=ko#hl=ko&q=javascript+clone
javascript clone
http://search.zum.com/search.zum?method=uni&option=accu&qm=f_typing.top&query=javascript+clone
$('div').append($('h1').clone());
https://search.naver.com/search.naver?sm=stb_hty&where=se&ie=utf8&query=%24%28%27div%27%29.append%28%24%28%27h1%27%29.clone%28%29%29%3B
----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
답변 감사드립니다. 스크립트 부분 코드를 지우고
답변 감사드립니다.
스크립트 부분 코드를 지우고 처음부터 instruction이 요구한대로 시작해서 차근차근 검색해서 다시 해서 완성했습니다.
걸어주신 링크 감사드립니다. 많은 도움이 될거 같습니다
댓글 달기