<div class="container">
<div class="row p-4">
<div class="col-xs-12">
<form name="form" id="form">
<div class="form-group">
<label for="selectBox">몇 회차 로또 결과를 볼까요?</label>
<select id="selectBox" name="selectBox" class="form-control">
<option value="" selected disabled>선택하세요...</option>
</select>
</div>
<button class="btn btn-primary" type="submit">결과 보기</button>
</form>
<script id="a1" defer="" type="text/javascript" document.write('src=""')></script>
<pre id="result"></pre>
<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>
</div>
</div>
전에 질문에 답변 달린것처럼 이런식으로 바꾸어 보았습니다.
결과보기 버튼을 누르면 이벤트가 실행되고 그 이벤트를 통하여
script id="a1" defer="" type="text/javascript" document.write('src=""')
이부분의 src 주소가 바뀌게 됩니다
(ex)http://lotto.kaisyu.com/api?method=get&gno=360;callback=loadlot";
해당 api주소에서 callback을 통하여 loadlot함수로 들어가 데이터가 처리가 되는데
현재 문제는 회차를 변경한후 결과보기 버튼을 눌렀을시 src주소는 회차에 맞게 바뀌지만
단 1번만 회차에 맞게 출력하고 그 이후에는 변동이 없습니다. 버튼을 누를시 저 구문을 다시
실행하게 하는 방법이 없을까요?
-------------------------------------------질문 추가 내용----------------------------
F12 개발자 도구로 보면 첫화면에서는
script id="a1" defer="" type="text/javascript" ')="" document.write('src="">
이런식으로 되어있던 해당 코드가 만약 2회를 클릭했을시
script id="a1" src="http://lotto.kaisyu.com/api?method=get&gno=2;callback=loadlot" defer="" type="text/javascript" ')="" document.write('src="">
이렇게 바뀌고 2회의 당첨번호를 화면에 뿌려줍니다. 그후 3회 4회 5회로 변경시에
저 주소는 바뀌게 되나 당첨번호는 바뀌지가 않네요
$(document).ready(function () {
var dropdown = $('#selectBox');
var form = $('#form');
var result = $('#result');
var a2=$('#a1');
for (i = 2; i < 861; i++) {
var option = $('<option>');
option.val(i).text(i+'회차');
dropdown.append(option);
}
form.on('submit', function (event) {
event.preventDefault();
if (!dropdown.val()) {
alert('뭔가 선택을 하세요.');
dropdown.focus();
} else {
document.getElementById("a1").src="http://lotto.kaisyu.com/api?method=get&gno="+dropdown.val()+";callback=loadlot";
}
});
});
올려주신 코드는 제가 사용하는 api를 ajax로 끌어올수 없어서 이런식으로 변경했습니다
function loadlot(a) {
$("#lottok").html('제 ' + a.gno + '회차 당첨 결과(' + a.gdate + ')'); // + '<br/>' +
//a.nums + a.bnum;
a.nums[6] = a.bnum;
for (i = 0; i < 7; i++) {
$('#output' + i).text(a.nums[i]);
}
for (i = 0; i < 7; i++) {
if (a.nums[i] <= 10) {
$('#output' + i).addClass("c1");
} else if (a.nums[i] <= 20) {
$('#output' + i).addClass("c2");
} else if (a.nums[i] <= 30) {
$('#output' + i).addClass("c3");
} else if (a.nums[i] <= 40) {
$('#output' + i).addClass("c4");
} else {
$('#output' + i).addClass("c5");
}
}
data = a;
}
이건 api에서 끌어온 데이터를 변수에 넣어서 화면에 뿌려주는 함수입니다