내 계산의 유효성을 검사 할 수 없습니다.

Question

양식의 유효성을 검사하는 데 문제가 있습니다. 은 내가 쓴 계산을 기반으로 스크립트는

<script> 
var class_let = new Array(); 
class_let["Class A"]=10; 
class_let["Class B"]=20; 
class_let["Class C"]=40; 
class_let["Class D"]=50; 

function getChargingPrice() { 
var price=0; 
var theForm = document.forms["Classes"]; 
var classPrice = theForm.elements["day1"]; 

if(classPrice.checked==true) 
{ 
    price = class_let[classPrice.value]; 
} 
return price; 
} 

function calculateTotal() { 
var calculatedPrice = getChargingPrice() + 20; 

var divobj = document.getElementById('totalPrice'); 
divobj.style.display='block'; 
divobj.innerHTML = "Total Price $"+calculatedPrice; 
} 

function hideTotal() { 
var divobj = document.getElementById('totalPrice'); 
divobj.style.display='none'; 
} 
</script> 

HTML 아래와 같이 :

<form action="" id="Classes" onsubmit="return false;"> 
<b>Select Class:</b> 
<select id="classLetter" name="classLetter" onchange="calculateTotal()"> 
    <option value="Class A">Class A</option> 
    <option value="Class B">Class B</option> 
    <option value="Class C">Class C</option> 
    <option value="Class D">Class D</option> 
</select> 
<p><b><label for="attendance">Days Attending:</label></b></p> 
<td><p><input type="checkbox" id="day1" name="Day One" onclick="calculateTotal()" value="Monday"/> Monday<br> 
<input type="checkbox" id="day2" name="Day Two" value="Tuesday"/> Tuesday<br> 
<input type="checkbox" id="day3" name="Day Three" value="Wednesday"/> Wednesday<br> 
<input type="checkbox" id="day4" name="Day Four" value="Thursday"/> Thursday<br> 
<input type="checkbox" id="day5" name="Day Five" value="Friday"/> Friday<br> 
<p><b><label for="cost">Total Cost:</label></b></p> 
<div id="totalPrice"></div> 
</form> 

은 내가해야하는 클래스, 일 총 가격 기능의 다섯 개 가지 체크 박스의 드롭 다운 목록입니다.

이 스크립트의 실행 방법은 각 클래스 (드롭 다운 목록)마다 가격이 다르지만 선택 또는 확인 된 일수가 추가됩니다. 예 : Class B (20 점)를 선택하고 월요일과 수요일을 선택하면 내 스크립트는 20 + 20 = 40과 끝에 20을 더하여 총 $ 60를 추가해야합니다.

전체 스크립트를 작성하지는 않았지만 하루를 확인하거나 클릭하면 문제점을 설명하는 것처럼 전체 계산을 수행 할 수 없습니다. 감사합니다. 감사합니다.

Answer 1

나는 이상한 코드가 체크 박스 값을 얻는 것을보고 그것이 월요일 인 첫 번째 체크 박스에서만 작동한다는 것을 알았다.

1. 나는 두 개의 값을 저장하는 것이 좋습니다 : 여기에 당신이 시작하는 몇 가지 도움말입니다. 하나는 어떤 클래스가 선택되었는지에 따라 현재 가격을 추적합니다. 하나는 선택한 날짜를 기준으로 가격을 추적합니다.

2. 입력/선택 요소가 변경되면이 가격을 계산하고 업데이트하십시오.

아래의 예는 (당신이 onchange를가 calculateTotal() 기능을 실행하기 위해 다른 4 확인란에 속성을 설정해야합니다 :

var class_let = new Array(); 
class_let["Class A"] = 10; 
class_let["Class B"] = 20; 
class_let["Class C"] = 40; 
class_let["Class D"] = 50; 

var classPrice = 0; 
var daysPrice = 0; 

function setClassPrice() { 
    var className = document.getElementById('classLetter').options[selectedIndex].value; 
    classPrice = class_let[className]; 
} 

function setDaysPrice() { 
    daysPrice = 0; 
    var checkbox, i; 
    for (i = 1; i <= 5; i++) { 
     checkbox = document.getElementById('day' + i); 
     if (checkbox.checked) { 
      daysPrice += 20; 
     } 
    } 
} 

function calculateTotal() { 
    setClassPrice(); 
    setDaysPrice(); 

    var calculatedPrice = classPrice + daysPrice; 
    var divobj = document.getElementById('totalPrice'); 
    divobj.style.display = 'block'; 
    divobj.innerHTML = "Total Price $" + calculatedPrice; 
} 

function hideTotal() { 
    var divobj = document.getElementById('totalPrice'); 
    divobj.style.display = 'none'; 
} 

Answer 2

내가 wongcode 동의를, 또한, 당신은 사용하지 않는 것을 시도해야한다 HTML 마크 업에서 이벤트 핸들러 예를 들면 다음과 같습니다.

<input type="radio" onclick = "myFunction()"> 

이 ^이 그냥 나쁜 방법입니다

.3210

가능한 한 JS를 자체 파일로 유지하십시오. 정확히 무엇을 달성하려고했는지 확신 할 수 없었기 때문에 jsfiddle에서 앱을 변경하여 변경되었습니다. 나는 HTML 마크 업 전체를 다시 만들었지 만 모든 것을 다시 할 시간이 없다. 여기 내가 만든 것입니다.

http://jsfiddle.net/VodkaTonic/aaDr6/3/

내가 여기 변경된 것 많은 것들이있다 명심하십시오.