2012-04-20 126 views
0

我真的很新寫javascript(借用和編輯,不是那麼新)。因此,藉助谷歌和代碼專家和Adobe Cookbook的一點幫助,我已經將這種簡單的表單嵌入iPad出版物中(這只是我的測試,而不是最終產品)。如果調試控制檯和它似乎通過W3C合規性,我已經得到了這一點,沒有錯誤,但它也沒有做任何事情!它不會生成答案?我希望有人能幫助我,或讓我走向正確的方向。該頁面的代碼如下:在此先感謝...Javascript窗體計算器沒有答案

<body> 
    <form id="form1" name="form1" method="post" action=""> 
     <table width="500" border="1"> 
     <tr> 
      <th scope="col">Item</th> 
    <th scope="col">Cost 1</th> 
    <th scope="col">Cost 2</th> 
</tr> 
<tr> 
    <th scope="row">Manikin</th> 
    <td><input type="text" name="ManikinCost1" id="ManikinCost1" tabindex="1" /></td> 
    <td><input type="text" name="ManikinCost2" id="ManikinCost2" tabindex="2" /></td> 
</tr> 
<tr> 
    <th scope="row">Instructor</th> 
    <td><input type="text" name="InstructorCost1" id="InstructorCost1" tabindex="3" /></td> 
    <td><input type="text" name="InstructorCost2" id="InstructorCost2" tabindex="4" /></td> 
</tr> 
<tr> 
    <th scope="row">Books</th> 
    <td><input type="text" name="BooksCost1" id="BooksCost1" tabindex="5" /></td> 
    <td><input type="text" name="BooksCost2" id="BooksCost2" tabindex="6" /></td> 
</tr> 
<tr> 
    <th scope="row">Totals</th> 
    <td><input type="text" name="TotalsCost1" id="TotalsCost1" tabindex="7" /><span id="TotalsCost1"></span></td> 
    <td><input type="text" name="TotalsCost2" id="TotalsCost2" tabindex="8" /><span id="TotalsCost2"></span></td> 
</tr> 
<tr> 
    <th scope="row">Savings</th> 
    <td colspan="2"><input type="text" name="Savings" id="Savings" /><span id="Savings"></span></td> 
</tr> 
     </table> 
     <p> 
     <input type="button" name="calculate" id="calculate" value="Calculate" /> 
     </p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
    </form> 

    <script type="text/javascript"> 
    var btn = document.getElementById('calculate'); 
    btn.onclick = function() { 
//get the input values 
var ManikinCost1 = parseInt(document.getElementById('ManikinCost1').value); 
var ManikinCost2 = parseInt(document.getElementById('ManikinCost2').value); 
var InstructorCost1 = parseInt(document.getElementById('InstructorCost1').value); 
var InstructorCost2 = parseInt(document.getElementById('InstructorCost2').value); 
var BooksCost1 = parseInt(document.getElementById('BooksCost1').value); 
var BooksCost2 = parseInt(document.getElementById('BooksCost2').value); 
// get the elements to hold the results 
var TotalsCost1 = document.getElementById('TotalsCost1'); 
var TotalsCost2 = document.getElementById('TotalsCost2'); 
var Savings = document.getElementById('Savings'); 
// create an empty array to hold error messages 
var msg = []; 
// check each input value, and add an error message to the array if it's not a number 
if (isNaN(ManikinCost2)) { 
    msg.push('Manikin Cost 2 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(InstructorCost1)) { 
    msg.push('Instructor Cost 1 is not a number'); 
    // the value isn't a number 
     } 
if (isNaN(InstructorCost2)) { 
    msg.push('Instructor Cost 2 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(BooksCost1)) { 
    msg.push('Book Cost 1 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(ManikinCost1)) { 
    msg.push('Manikin Cost 1 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(BooksCost2)) { 
    msg.push('Book Cost 2 is not a number'); 
    // the value isn't a number 
    } 
    // if the array contains any values, display an error message 
    if (msg.length > 0) { 
     TotalsCost1.innerHTML = msg.join(', '); 
    } else { 
     TotalsCost1.innerHTML = + (ManikinCost1 + InstructorCost1 + BooksCost1); 
     TotalsCost2.innerHTML = + (ManikinCost2 + InstructorCost2 + BooksCost2); 
     Savings.innerHTML = + (TotalsCost1 - TotalsCost2); 
    } 
    }; 
    </script> 
    </body> 

回答

0
btn.onclick = (function(){...})(); 

你需要把onclick事件中自我調用代碼,或所謂的閉包。將您的整個btn.onclick函數放在這一位代碼中:(...)()以使其工作。

0

好的嘗試,幾個小東西錯了,但很近!

我做了一些改動here。如上所述,我用括號(function(){...})封裝了函數;

因爲我們正在更新文本輸入,所以我也將innerHTML更改爲值,並且您的儲蓄計算應該是input.value,我已爲您更新。

讓我知道你如何繼續!

<body> 
<form id="form1" name="form1" method="post" action=""> 
     <table width="500" border="1"> 
     <tr> 
      <th scope="col">Item</th> 
    <th scope="col">Cost 1</th> 
    <th scope="col">Cost 2</th> 
</tr> 
<tr> 
    <th scope="row">Manikin</th> 
    <td><input type="text" name="ManikinCost1" id="ManikinCost1" tabindex="1" /></td> 
    <td><input type="text" name="ManikinCost2" id="ManikinCost2" tabindex="2" /></td> 
</tr> 
<tr> 
    <th scope="row">Instructor</th> 
    <td><input type="text" name="InstructorCost1" id="InstructorCost1" tabindex="3" /></td> 
    <td><input type="text" name="InstructorCost2" id="InstructorCost2" tabindex="4" /></td> 
</tr> 
<tr> 
    <th scope="row">Books</th> 
    <td><input type="text" name="BooksCost1" id="BooksCost1" tabindex="5" /></td> 
    <td><input type="text" name="BooksCost2" id="BooksCost2" tabindex="6" /></td> 
</tr> 
<tr> 
    <th scope="row">Totals</th> 
    <td><input type="text" name="TotalsCost1" id="TotalsCost1" tabindex="7" /><span id="TotalsCost1"></span></td> 
    <td><input type="text" name="TotalsCost2" id="TotalsCost2" tabindex="8" /><span id="TotalsCost2"></span></td> 
</tr> 
<tr> 
    <th scope="row">Savings</th> 
    <td colspan="2"><input type="text" name="Savings" id="Savings" /><span id="Savings"></span></td> 
</tr> 
     </table> 
     <p> 
     <input type="button" name="calculate" id="calculate" value="Calculate" /> 
     </p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
    </form> 


    <script type="text/javascript"> 
var btn = document.getElementById('calculate'); 
    btn.onclick = (function() { 
//get the input values 
var ManikinCost1 = parseInt(document.getElementById('ManikinCost1').value); 
var ManikinCost2 = parseInt(document.getElementById('ManikinCost2').value); 
var InstructorCost1 = parseInt(document.getElementById('InstructorCost1').value); 
var InstructorCost2 = parseInt(document.getElementById('InstructorCost2').value); 
var BooksCost1 = parseInt(document.getElementById('BooksCost1').value); 
var BooksCost2 = parseInt(document.getElementById('BooksCost2').value); 
// get the elements to hold the results 
var TotalsCost1 = document.getElementById('TotalsCost1'); 
var TotalsCost2 = document.getElementById('TotalsCost2'); 
var Savings = document.getElementById('Savings'); 
// create an empty array to hold error messages 
var msg = []; 
// check each input value, and add an error message to the array if it's not a number 
if (isNaN(ManikinCost2)) { 
    msg.push('Manikin Cost 2 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(InstructorCost1)) { 
    msg.push('Instructor Cost 1 is not a number'); 
    // the value isn't a number 
     } 
if (isNaN(InstructorCost2)) { 
    msg.push('Instructor Cost 2 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(BooksCost1)) { 
    msg.push('Book Cost 1 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(ManikinCost1)) { 
    msg.push('Manikin Cost 1 is not a number'); 
    // the value isn't a number 
    } 
if (isNaN(BooksCost2)) { 
    msg.push('Book Cost 2 is not a number'); 
    // the value isn't a number 
    } 
    // if the array contains any values, display an error message 
    if (msg.length > 0) { 
     TotalsCost1.innerHTML = msg.join(', '); 
    } else { 

     TotalsCost1.value = + (ManikinCost1 + InstructorCost1 + BooksCost1); 
     TotalsCost2.value = + (ManikinCost2 + InstructorCost2 + BooksCost2); 
     Savings.value = + (TotalsCost1.value - TotalsCost2.value); 
    } 
    }); 

    </script> 
    </body>