자바스크립트 select box 사용 질문좀 드려도 될까요?

Question

자바스크립트 select box 사용 질문좀 드려도 될까요?

조회수 958회

node.js

javascript

0

싫어요

로또 추첨 만들고 있는데 막히는 부분이 있어서 질문드립니다 !

일단 첫화면에 보여지는 index.html 에

<form name="form">
<select id="selectBox" name="selectBox" onchange="OnChange();">
    <option>1</option>
<script>
    for(i=2;i<861;i++){
    document.write("<option>"+i+"</option>");
    }
</script>
</select>
</form>

<script>bbb=$("#selectBox").val();</script>
<script id="ddd"  defer="" type="text/javascript" document.write('src=""')></script>
<script type="text/javascript">
    document.getElementById("ddd").src="http://lotto.kaisyu.com/api?method=get&gno="+bbb+";callback=loadlot";
</script>
<p style="position:absolute;top:calc(50% + 100px);width:100%;">
    <input type="text" id="inputnum" value="5" size="2">번 <span class="key" onclick="count()">시작</span>
</p>

<section id="winner" class="shadow">
    <h2 id="lottok">loading...</h2>
    <div class="output" id="output0"></div>
    <div class="output" id="output1"></div>
    <div class="output" id="output2"></div>
    <div class="output" id="output3"></div>
    <div class="output" id="output4"></div>
    <div class="output" id="output5"></div>
    <div class="output" style="box-shadow:none; color:#000;">+</div>
    <div class="output" id="output6"></div>
</section>
<div id="stats"></div>

<ol id="lottotable"></ol>

이러한 소스가 있습니다. 처음 페이지에 접속하면 맨밑 section winner에 로또 1회 번호가 자동으로 보여지게 됩니다

이 섹션은 main.js에 있는 함수를 통하여 이루어지게 되는데 현재 제가 막히는 부분은

위에 selectbox를 통하여 1회~860회까지 박스를 만들어 둔 상태이고 만약 10회를 클릭하면 밑에 section winner에 로또 1회 번호가

로또 10회 번호로 바뀌게끔 하고 싶습니다. 그렇기에 bbb=$("#selectBox").val(); 를 통하여 설렉트박스에서 선택한 벨류값을

끌어와서 기존 주소와 조합해서 src로 쓰게끔 만들어두었는데 문제는 이미 페이지가 한번 로딩된 상태라 밑의 당첨번호가 바뀌질 않습니다

그래서 생각한게 첫번째 방법은 onChange를 통하여 이벤트를 발생시키는 방법인데 도저히 감이 안잡히고

두번째 방법은 설렉트 박스 선택시 해당 선택값을 저장해두고 새로고침후 그 값을 넘겨주는건데 이것도 현재 막히고 있습니다

c++만 하다가 nodejs 하려니 너무 막히네요 ㅠㅠ 좋은 방법이 없을까요?

김이용 10 points

2019-06-01 22:03:57에 작성됨

댓글 입력

score 0 · Accepted Answer

질문하고 계신 것은 셀렉트박스 문제가 아니라 사실은 JS에서 동적으로 요소를 그리거나 비동기 요청을 받아오는 것에 관한 것입니다. 그건 대략 다음과 같이 합니다.

HTML 쪽에는, 갑자기 모든 게 수틀려서 JS가 전혀 작동하지 않을 때 나와야 하는 최소한의 마크업을 넣습니다.
JS 쪽에서는, JS가 작동할 때에야 비로소 의미가 있는 동적 요소를 필요한 대로 쭉 생성해 줍니다.
API를 실행해야 할 경우에는, JS 쪽에서, 필요한 요소에 onchange, onsubmit 같은 이벤트의 리스너를 걸고 그 안에 들어가는 처리를 통해 실행하게 합니다.
그런데 여기서부터가 좀 안 좋은 뉴스입니다. 하필 지금 하고 계시는 "로또 당첨결과 퍼오기"는, 주어진 API의 특성상, CORS 정책에 걸리거나 혼합 콘텐츠 블로킹에 걸려서 제대로 작동을 안 합니다. 원래대로라면 여기서 볼 수 있는 데모 코드처럼 작동을 해야 합니다. 여기서 쓰는 API는 공갈 자료를 내려주는 API인데 https를 지원하고 응답헤더의 access-control-allow-credentials가 true이니 정상적으로 어디서나 값을 받아볼 수 있지요.

Node.js를 한다고 하셨으니... API 호출을 바로 JS를 통해서 하지 않고 내부 API를 통해서 우회하여 받아보는 방법이 있기는 합니다. 참고하세요.