왕초보가 자바스크립트에 대해 질문드립니다.
본문
자바스크립트로 여기저기서 짜집기 해서 자동 견적 되는걸 만들고 있는데요..
초보자라 여기저기서 막히고 있어... 고수님들께 도움을 요청드립니다.
코드는 아래와 같고...
카테고리 3개를 선택했을때 목록이 추가되고 그목록에서 수량을 변경할수 있게 하고
그 항목들의 총합을 자동으로 계산될수 있게 구성하고 싶습니다.
지금 에러는
1. 항목이 하나일때는 수량 변동이 되는데.. 그항목에서 수량 * 단가 값이 자동계산이 안됩니다.
2. 2개이상 항목이 있을경우 수량변동 , 자동 계산이 다 안됩니다.
이 어느 부분을 수정해야 제가 생각하는 대로 출력이 될수있을까요...
고수님들의 도움이 절실히 필요합니다.
----------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body onload="init();">
<script language="JavaScript">
<!--
var table_count = new Array()
var count = 0;
var cnt = 0;
var country_name="";
var city="";
table_count[0] = 0;
function select_chang(country,selt,index) {
var selt = "document.select_form.formselect" + selt;
var frameobj = eval(selt);
document.select_form.reset(); // select 문의 선택을 reset 한다
frameobj.options[index].selected = true; // 선택되건만 보여진다.
country_name = country;
city = frameobj.options[index].text;
city_2 = frameobj.options[index].value;
city_sum = parseInt(frameobj.options[index].value) * 1;
addRow('table_list');
}
function addRow(TableID) {
count++;
cnt++;
table_count[cnt] = count;
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1body = "<input type='text' value='" + country_name + "' readonly>";
td1.insertAdjacentHTML('beforeEnd', td1body );
var td2 = document.createElement("TD");
td2body = "<input type='text' ' value='" + city +"' size='10' readonly>";
td2.insertAdjacentHTML('beforeEnd', td2body);
var td3 = document.createElement("TD");
td3body = "<input type='text' name='sell_price' value='" + city_2 +"' size='10' onchange='change();' readonly>";
td3.insertAdjacentHTML('beforeEnd', td3body);
var td4 = document.createElement("TD");
td4body = "<input type='text' name='amount' value='1' size='10' onchange='change();'><input type='button' value=' + ' onclick='add();'><input type='button' value=' - ' onclick='del();'>";
td4.insertAdjacentHTML('beforeEnd', td4body);
var td5 = document.createElement("TD");
td5body = "<input type='text' name='sum' size='11' value='" + city_sum + "' readonly>원";
td5.insertAdjacentHTML('beforeEnd', td5body);
var td6 = document.createElement("TD");
td6body = "<p align='center'><input type='button' value='삭제' style='border-width:1px; border-style:solid;' onclick=delRow('" + TableID + "'," + table_count[cnt] +")>";
td6.insertAdjacentHTML('beforeEnd', td6body);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
tbody.appendChild(row);
}
function delRow(TableID,num) {
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
for ( var i = 1; i < table_count.length ; i++ ) {
if ( table_count[i] == num ) {
tbody.deleteRow(i); // 테이블 삭제
table_count[i] = 0;
}
}
for ( var i = 1; i < table_count.length ; i++ ) {
if ( table_count[i] == 0) {
cnt = tbody.rows.length-1;
for ( j = i ; j < table_count.length ; j++)
table_count[j] = table_count[j+1];
}
}
}
function cancel(TableID) {
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var del_cnt = tbody.rows.length;
for ( var i = 1; i < del_cnt; i++ ) {
tbody.deleteRow(1); // 테이블 삭제
}
cnt = 0; // 테이블 관련 번호를 초기화
}
///////////////////////////////////////////
var sell_price;
var amount;
function init () {
frameobj.options[index].selected = true; // 선택되건만 보여진다.
sell_price = frameobj.options[index].value;
amount = document.select_form.amount.value;
document.select_form.sum.value = sell_price;
change();
}
function add () {
hm = document.select_form.amount;
sum_value = document.select_form.sum;
hm.value ++ ;
sum_value.value = parseInt(hm.value) * sell_price;
}
function del () {
hm = document.select_form.amount;
sum_value = document.select_form.sum;
if (hm.value > 1) {
hm.value -- ;
sum_value.value = parseInt(hm.value) * sell_price;
}
}
function change () {
hm = document.select_form.amount;
sum_value = document.select_form.sum;
if (hm.value < 0) {
hm.value = 0;
}
sum_value.value = parseInt(hm.value) * sell_price;
}
//-->
</script>
<body onload="init();">
<form name="select_form">
<table border="0" cellpadding="3" cellspacing="0" width="600">
<tr>
<td><b>제품 1</b></td>
<td><b>제품 2</b></td>
<td><b>제품 3</b></td>
</tr>
<tr>
<td valign=top>
<select name="formselect0" style="width:100px;" onchange="select_chang('제품 1',0,selectedIndex)">
<option value="11000">제품 1-1 </option>
<option value="21000">제품 1-2</option>
<option value="31000">제품 1-3</option>
<option value="41000">제품 1-4</option>
<option value="51000">제품 1-5</option>
<option value="61000">제품 1-6</option></select>
</td>
<td valign=top>
<select name="formselect1" style="width:100px;" onchange="select_chang('제품 2',1,selectedIndex)">
<option value="100">제품 2-1</option>
<option value="200">제품 2-2</option>
<option value="300">제품 2-3</option>
<option value="400">제품 2-4</option>
<option value="500">제품 2-5</option></select>
</td>
<td valign=top>
<select name="formselect2" style="width:100px;" onchange="select_chang('제품 3',2,selectedIndex)">
<option value="6000">제품 3-1</option>
<option value="7000">제품 3-2</option>
<option value="8000">제품 3-3</option>
<option value="9000">제품 3-4</option>
<option value="9001">제품 3-5</option></select>
</td>
</tr>
<tr align=center>
<td colspan=2></td>
</tr>
</table>
<table id="table_list" border="0" cellpadding="2" cellspacing="0" width="800">
<tbody>
<tr bgcolor="#CCCCCC">
<th>카테고리</th>
<th>상품</th>
<th>단가</th>
<th>수량</th>
<th>소계</th>
<th>확인</th>
</tr>
</tbody>
</table>
<table>
<tr>
<td>합계</td>
<td><input type='text' name='amount' value='수량' size='10' onchange='change();'></td>
<td><input type='text' name='amount' value='1' size='10' onchange='change();'></td>
<td><input type='text' name='amount' value='1' size='10' onchange='change();'></td>
<td><input type='text' name='amount' value='1' size='10' onchange='change();'></td>
<td><input type=button value="전체삭제" style='border-width:1px; border-style:solid;' onclick=cancel("table_list") ></td>
</tr>
</table>
</form>
</body>
</html>
답변 1
이런말씀 드리기 좀 어렵긴 한데... 스크립트 만드신것 자체는 단일 항목만을 위한 것입니다.
여러개에 필드로 하시고자 하면 html 코딩부터 변경이 필요합니다..
설명만으로는 도움이 어렵고 제작의뢰를 통해서 하심이 어떨가요?
힌트를 드리고자 하면 name으로 amount 로 쓰지 마시고 id 값으로 구분을 해서 사용하시거나 하는게 도움이 되실것 같네요..
현재대로라면 amount 객체를 찾더라도 원하는 값을 계산하기 위한 객체가 아닐수도 있습니다.
그리고 차라리 jquery 를 쓰셔서 foreach 라던지 parent, find 이런 구문으로 만드는게 간결하게 만들 수 있습니다.
답변을 작성하시기 전에 로그인 해주세요.