如何从外部 javascript 函数返回值

How to return values from external javascript function

本文关键字：函数 返回值 javascript 从外部      更新时间：2023-09-26

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

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>$19.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>$86.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>$55.00</td>
         </tr>
       </table>
       <br /><br />
       <input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
       </fieldset>
      </form>
     </div>
  </body>
</html>

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

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>$19.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>$86.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>$55.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>

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

但是，这将执行您想要的操作：

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

您所需要的只是一个具有该id的 HTML input元素(您的 HTML 当前缺少(：

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

(此外，您的 JavaScript 缺少结束}，这是一个语法错误。

一旦你有了那个HTML元素并删除了document.write()调用，这应该正确地输出值。

<小时 />

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

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

具有如下元素：

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

作为术语的旁白，这不是从函数中"返回"值。 当涉及到函数时，"Return"具有非常具体的含义，当函数本身使用 return 关键字生成值时，将该值将堆栈传递到调用函数的代码。

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

相关文章：