如何 return 来自外部 javascript 函数的值

Question

我在外部 java 脚本文件中有一个函数，但我不知道如何正确调用 return 我的函数 return 在文本中的值。当我单击下订单时，我希望通过我的函数计算值，然后将最终值显示在下订单框下方。如果我什么都不输入，我可以让我的功能发出警报，但我无法将其设置为 return 我的最终值 - 我做错了什么？

function sum2()
{
      var one = document.getElementById("book_1").value;
      var two = document.getElementById("book_2").value;
      var three = document.getElementById("book_3").value;

      if ((one == "")||(two == "")||(three == ""))
      {
        alert ('Error', 'values missing');
      }
      else
      {
         var sum1 = one * 19.99;
         var sum2 = two * 86.00;
         var sum3 = three * 55.00;
         var sum = sum1 + sum2 + sum3;

         document.getElementById('output').value = sum;
         document.write(sum);
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Work</title>
    <script type="text/javascript" src="ex4.js"></script>
  </head>
  <body>
     <div id="container">
     <h2>Order Books Online</h2>
     <form action="" method="post" id=”frm”>
       <fieldset>
       <table border="0">
         <tr>
           <th>Book</th>
           <th>Quantity</th>
           <th>Price</th>
         </tr>
         <tr>
           <td>Basics of C++</td>
           <td><input type="text" size="3" id="book_1" /></td>
           <td>.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>.00</td>
         </tr>
       </table>
       <br /><br />
       <input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
       </fieldset>
      </form>
     </div>
  </body>
</html>

Answer 1

试试这个，它的工作，输出显示在最后。

function sum2()
{
      var one = document.getElementById("book_1").value;
      var two = document.getElementById("book_2").value;
      var three = document.getElementById("book_3").value;

      if ((one == "")||(two == "")||(three == ""))
      {
        alert ('Error', 'values missing');
      }
      else
      {
         var sum1 = one * 19.99;
         var sum2 = two * 86.00;
         var sum3 = three * 55.00;
         var sum = sum1 + sum2 + sum3;

         document.getElementById('output').innerHTML = sum;
        // document.write(sum);
        }
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Work</title>
    <script type="text/javascript" src="ex4.js"></script>
  </head>
  <body>
     <div id="container">
     <h2>Order Books Online</h2>
     <form action="" method="post" id=”frm”>
       <fieldset>
       <table border="0">
         <tr>
           <th>Book</th>
           <th>Quantity</th>
           <th>Price</th>
         </tr>
         <tr>
           <td>Basics of C++</td>
           <td><input type="text" size="3" id="book_1" /></td>
           <td>.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>.00</td>
         </tr>
       </table>
       <br /><br />
       <input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
       </fieldset>
      </form>
     </div>
    <div id="output"></div>
  </body>
</html>

Answer 2

document.write() 的使用似乎不是您想要的。（而且，老实说，无论如何都应该避免。）

然而，这将做你想做的事：

document.getElementById('output').value = sum;

您只需要一个 HTML input 元素，其中包含 id（您的 HTML 目前缺少）：

<input type="text" id="output" />

（此外，您的 JavaScript 缺少结尾的 }，这是一个语法错误。）

获得 HTML 元素并删除 document.write() 调用后，应该会正确输出值。

如果你想输出到另一个 input 元素以外的东西，那么你不会使用 .value 而是更像 .innerHTML 的东西：

document.getElementById('output').innerHTML = sum;

具有诸如以下元素：

<span id="output"></span>

关于术语，这不是 "returning" 函数的值。 "Return" 对于函数有一个非常具体的含义，当函数本身使用 return 关键字产生一个值时，将该值返回堆栈传递给调用该函数的代码。

此函数正在向 HTML 写入值，但未返回任何内容。

如何 return 来自外部 javascript 函数的值

How to return values from external javascript function

html

javascript

external

function

submit