[html, JS] 다른 id의 내용을 가져오거나 특정 id의 내용을 동적으로 바꾸고 싶어요.

조회수 100회

안녕하세요! 취미로 틈틈이 프론트엔드를 공부하고 있는 문과생입니다.

본격적으로 공부하기엔 시간 관리가 어려워서 지인과 스터디 방식으로 공부하고 있는데,

그러다 보니 머리를 싸매도 답을 못 내는 부분들이 생겨서 이렇게 질문을 남기게 되었습니다.

도움 부탁드립니다! ㅠㅠ


만들어 보고 싶은 내용은 간단합니다!

'선택' 아래의 각 X를 누르면, 아래쪽 table의 내용이 맞게 채워지고,

X가 O로 바뀌는 것입니다.(다른 행이 선택되어 있었다면 그것은 X로)


학생 목록 학번 이름 선택 1122333(id="number1") 김XX (id="name1") X (id="choice1", onclick="choice(1)) 1222333(id="number2") 이XX (id="name2") X (id="choice1" onclick="choice(2)) 1322333(id="number3") 박XX (id="name3") X (id="choice1" onclick="choice(3))

선택된 학생 학번 이름 N/A (id="choicenumber") N/A (id="choicename")


function choice(n) {
 $("#choicenumber").val("#number" + "n");
 $("#choicename").val("#name" + "n");
 $(".choice").text(X);
 $("#choice" + "n").text(O);
}
var arrName = ["", "김XX", "이XX", "박XX"]
function choice(n) {
    window.open("selected.html");
    var selected = choice[n];
    $("#choicename").val("arrName[n]");
};
// 결과 table을 새 창으로도 뜨게 하고 싶은데, 잘 되지 않아서
// 우선은 한 html 내에서 작동하는 것을 먼저 해결해 보고자 합니다.

js는 이래저래 작성해 봤는데, 제가 생각할 때 해결에 근접하지 않을까, 생각한 건 위의 두 가지 방식이었습니다.

choice(1)을 작동하면 number1와 name1의 내용이 choicenumber와 choicename에 채워지고,

choice(2)를 작동하면 number2와 name2의 내용이 각기 choicenumber와 choicename에 채워지게 하고 싶습니다.

.val()을 사용하는 방법이 잘못된 걸까요, 아니면 .val()외에 다른 걸 사용해야 하는 걸까요?..


jsfiddle에도 작성해 보았습니다. 봐주시면 감사하겠습니다ㅠㅠ

http://jsfiddle.net/yeonha871/whxLovka/23/

1 답변

  • 좋아요

    3

    싫어요
    채택 취소하기

    질문자가 작성한 코드를 최대한 그대로 둔 채 수정했습니다.

    http://jsfiddle.net/whxLovka/75/

    학습을 많이 해야 할 것으로 보입니다.

    우선 jquery를 학습하지 말고 html5 과 vanilla javascript(ecma6), css 에 집중하여 먼저 학습하시기 바랍니다.

    jquery 는 이제 중요도도 많이 떨어지고 있고 javascript 를 잘하게 되면 조금만 시간 투자하면 됩니다.

    이제는 javascript 가 더 중요해집니다.

    클라우드 기반의 마이크로 서비스, 서버리스 아키텍쳐가 대두되고 있습니다.

    이제는 장황한 java 로 온프라미스상에서 개발하던 시대가 지나가고 있고 그 중심에 python, javascript 같은 접근하기 쉬운 언어들이 있습니다.

    학생인 듯 싶은데 조금 멀리 보고 학습하시기 바랍니다.

    그리고 새창을 다루는 방법은 아래의 링크로 대신합니다,

    http://runtoyourdream.tistory.com/211

    • 동감합니다. 앞으로의 비젼을 생각해서도 그렇지만 어떤 것이든 새로운 것을 배울 때는 기본기가 중요합니다. Javascript를 잘 모르는 상태에서 Javascript로 만들어진 Library인 JQuery를 공부하는 것은 오히려 독이 될 수 있습니다. Peter 2019.1.8 11:27
    • 도움 감사드립니다! 말씀해 주신 것처럼 코드 내용은 비슷해 보여도 결과가 깔끔하게 나오네요.. 공부 방향에 대해서도 의견 주셔서 감사합니다. 같이 스터디 하느 지인에게도 보여주고 방향을 다시 잡아보도록 하겠습니다. 좋은 하루 보내시기 바랍니다 :) 일반명사 2019.1.8 12:50

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.