up down 버튼 만들기 (DOM)

<script>
function mk_btn_updown(idname,num_max,num_min){
//num_max이 0(false)이면 max값을 무한대이다.
//min의 기본값은 0이다.
var num_min=parseInt(num_min)?parseInt(num_min):0;
var num_max=parseInt(num_max)?parseInt(num_max):'max';

var ta = document.getElementById(idname);
ta.style.verticalAlign='middle';
ta.readOnly = true;

var span = document.createElement('span')
span.style.margin='0px';
span.style.padding='0px';
span.style.borderStyle='solid';
span.style.borderWidth='0px';
//span.style.height='10px';
//span.style.width='10px';
span.style.top='0px';
span.style.left='0px';
span.style.verticalAlign='middle';
//span.style.position='relative';

var input_up = document.createElement('input')
input_up.type='button';
input_up.value='▲';
input_up.style.backgroundColor='#FFEEEE';
input_up.style.verticalAlign='middle';
input_up.style.fontSize='8px';
input_up.style.borderStyle='none';
input_up.style.width='10px';
input_up.style.height='20px';
input_up.style.margin='0px';
input_up.style.padding='0px';
//input_up.style.top='-5px';
//input_up.style.float='left';
//input_up.style.position='relative';
var input_down = input_up.cloneNode(false);
input_down.style.verticalAlign='middle';
input_down.value='▼';
input_down.style.backgroundColor='#EEEEFF';
//input_down.style.top='5px';
//input_down.style.left='-10px';
span.appendChild(input_up);
span.appendChild(input_down);

 

var handleEvent1 = function(){
temp = input_up.parentNode.previousSibling;
if(num_max=='max'){
temp.value=parseInt(temp.value)+1;
}else if((next=parseInt(temp.value)+1)<=num_max){
temp.value=next;
}
}
if(input_up.attachEvent)
input_up.attachEvent("onclick", handleEvent1 );
else
input_up.addEventListener("click", handleEvent1 , false);

var handleEvent2 = function(){
temp = input_down.parentNode.previousSibling;
if(parseInt(temp.value)-1>= num_min){
temp.value=parseInt(temp.value)-1;
}
}
if(input_down.attachEvent)
input_down.attachEvent("onclick", handleEvent2 );
else
input_down.addEventListener("click", handleEvent2 , false);

if (ta.nextSibling)
ta.parentNode.insertBefore(span,ta.nextSibling);
else ta.parentNode.appendChild(span);
}
</script>
<div>
<input type="text" id="test" size="5" maxlength="10" value="3" style="font-size:12px; ">
</div>
<script>mk_btn_updown('test',10,-4);</script>





DOM은 삽질

댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
4.28
4.29
4.30
5.1
5.2
5.3
5.4
5.5
5.6
5.7
5.8
5.9
5.11
5.12
5.13
5.15
5.16
5.17
5.18
5.19
5.20
5.21
5.22
5.23
5.24
5.25
5.26
5.27
5.28
5.29
5.30
5.31
6.1