0

我对真正编写 javascript 非常陌生（借用和编辑，不是那么新）。因此，在 google 和 code guru 和 adobe cookbook 的帮助下，我想出了这个简单的表格，可以嵌入到 iPad 出版物中（这只是我的测试，不是最终产品）。如果调试控制台并且它似乎通过了 W3C 合规性，我已经做到了这一点，没有任何错误，但它也没有做任何事情！它不会生成答案？？？我希望有人可以帮助我或引导我朝着正确的方向前进。该页面的代码如下：在此先感谢...

    <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>
4

2 回答 2

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

您需要将onclick事件放入自调用代码或所谓的闭包中。将你的整个btn.onclick函数移动到这段代码中：(...)()为了让它工作。

于 2012-04-20T21:43:56.633 回答
0

很好的尝试，有一些小错误，但非常接近！

我在这里做了一些改变。

正如评论中提到的，我用括号 (function() {...}); 包裹了函数。

当我们更新文本输入时，我还将 innerHTML 更改为 value，您的储蓄计算应该是 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>
于 2014-03-24T01:33:45.023 回答