外部のJavaScript関数から値を返す方法

私は外部のJavaスクリプトファイルに関数を持っています。私は関数を呼び出して、関数がテキストで正しく返す値を返す方法を知らない。プレースオーダーをクリックすると、値を関数で計算し、最終値をプレースオーダーボックスの下に表示します。私は何も入力しなければ私の最終的な価値を返すためにそれを得ることができません - 私は間違って何ですか？外部のJavaScript関数から値を返す方法

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>

出典

2016-07-30 lucyb

その作業、出力は最後に表示され、これを試してみてください。

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>

出典

2016-07-30 18:19:55

私は、プロンプトボックスに結果を表示するだけで、ボタンのすぐ下にテキストが表示されないようにします。 – lucyb

プロンプトボックスが削除されました。今すぐ確認してください。 –

ありがとう、ありがとう！ – lucyb

document.write()の使用は、あなたがここにしたいと思うものをしていないようです。（そして、正直に、とにかく一般的に避けるべきである。）

しかし、このははあなたがやりたいことになります。

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

が必要なのは、そのid（あなたの持っているHTML input要素であり、 HTMLは現在）欠落しています。

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

（また、あなたのJavaScriptが構文エラーであるクロージング}を、不足している）

。

HTML要素があり、document.write()呼び出しを削除したら、値を正しく出力する必要があります。

あなたが別のinput要素以外の何かに出力したい場合は、代わりに、より.innerHTMLよう.value何かを使用することはありません。

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

のような要素で：

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

これは関数から値を返すわけではありません。 "Return"は、関数に関しては非常に具体的な意味を持ちます。関数自体がreturnキーワードを使用して値を返し、その値を関数を呼び出したコードに戻します。

この関数は値をHTMLに書き込みますが、何も返されません。

出典

2016-07-30 18:29:29 David

このコメントありがとうございました – lucyb

外部のJavaScript関数から値を返す方法

答えて

関連する問題