sun3
386
2021-04-01 00:44:36 작성 2021-04-01 00:46:03 수정됨
6
336

웹개발을 하다보니 의문이 생겼습니다



                var tankWidth =document.getElementById("tank-width").value ;
                var tankHeight = document.getElementById("tank-height").value ; 
                var tankDepth = document.getElementById("tank-depth").value;
                var tankSand = document.getElementById("tank-sand").value;
                var waterLevel = document.getElementById("water-level").value;
                var tankWeight = document.getElementById("tank-wieght").value;


언어에대한 의문이라기보다 사용방법에대한 궁금증인데요,.,

html에서 가져와야할 인풋값이 이렇게 많아지는 경우 

이렇게 하나씩 가져오는게 맞나요?

input value 말고도 css 등등 가져올 값이 많은데

document.getElement를 엄청나게 쓰다보니

제가 초보라 비효율적으로 짜고 있나 싶어서요..



1
  • 답변 6

  • 장독깨기
    1k
    2021-04-01 01:10:23

    저럴땐 어레이로 미리 정의해두고 사용하면 편리합니다.

    var elements = ["tankwidth","tank-height", ...];

    var tank = {};

    elements.forEach(function(element) {

      tank[element] = $("#"+element).val();

    });


    console.log(tank.tankwidth);

    console.log(tank["tank-height"]);

  • WRITE_IN_DART✎
    2021-04-01 01:11:32

    리액트 같은 경우는 tank를 컴포넌트로 만들고 적으신걸 다 객체로 감싸서 prop으로 주고 받습니다.


    그럼 조금 더 편해지죠.

  • sun3
    386
    2021-04-01 01:11:41

    장독깨기 답변 정말 감사드립니다. 후반가서는 저렇게했는데 해도되나 싶었네요!

  • 장독깨기
    1k
    2021-04-01 01:21:57 작성 2021-04-01 01:24:37 수정됨

    ㅎㅎ 막 해도 됩니다.

    어레이 정의하지 않고 문자열 패턴으로 찾을수도 있고,

    구조화를 잘하면 children 으로 찾을수도 있겠죠.. 

    아 클래스 정의해두고 찾을 수도 있겠네요..

    암튼 다양하게 할 수 있습니다.^^

  • 화이트데이
    1k
    2021-04-01 07:46:29

    그냥 폼에 있는값들 ajax로 전송하거나 submit 하시는거면

     var params = jQuery("#폼명").serialize();

    이런식으로 간단히 하면 될듯 근데 저렇게 하나씩 전부 호출하는경우는 많지 않아서..

  • sun3
    386
    2021-04-03 02:30:27

    답변해주시분들 모두 감사드립니다. 많은 도움되었습니다

  • 로그인을 하시면 답변을 등록할 수 있습니다.