Wie Werte von externen Javascript-Funktion zurückgegeben werden

Ich habe eine Funktion in einer externen Java-Skriptdatei und ich weiß nicht, wie ich den Wert, den meine Funktion im Text richtig zurückgibt, zurückgeben und zurückgeben. Wenn ich auf die Ortsreihenfolge klicke, möchte ich, dass die Werte von meiner Funktion berechnet werden und dann der endgültige Wert, der unter dem Feld für die Ortsreihenfolge angezeigt wird. Ich kann meine Funktion alarmieren, wenn ich nichts eingebe, aber ich kann nicht meinen endgültigen Wert zurückgeben - was mache ich falsch?Wie Werte von externen Javascript-Funktion zurückgegeben werden

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>

Quelle

2016-07-30 lucyb

Versuchen Sie dieses, seine Arbeits, zuletzt anzeigt Ausgang auf.

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>

Quelle

2016-07-30 18:19:55

das ist was ich will, außer, ich möchte nicht eine Eingabeaufforderung, um das Ergebnis anzuzeigen, nur in Text direkt unter der Schaltfläche – lucyb

Eingabeaufforderung entfernt, überprüfen Sie es jetzt –

yep das ist es, danke! – lucyb

Die Verwendung von document.write() scheint nicht zu sein, was Sie hier wollen würde. (Und, ehrlich sollte, ohnehin in der Regel vermieden werden.)

Doch diese wird tun, was Sie wollen:

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

Alles was Sie benötigen ist ein HTML-input Element, das hat, dass id (dem Ihr HTML fehlt derzeit):

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

(Zusätzlich sie JavaScript ein Schließ }, fehlt die ein Syntaxfehler ist)

Sobald Sie dieses HTML-Element haben und den Aufruf document.write() entfernen, sollte der Wert korrekt ausgegeben werden.

Wenn Sie die Ausgabe auf etwas anderes wollen, als ein anderes input Element, dann würden Sie nicht verwenden .value aber etwas mehr wie .innerHTML statt:

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

mit einem Element wie zum Beispiel:

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

Als beiseite in Bezug auf ter Minology, das ist nicht "Rückgabe" der Wert von der Funktion. "Rückgabe" hat eine sehr spezifische Bedeutung, wenn es um Funktionen geht. Wenn die Funktion selbst einen Wert mit dem Schlüsselwort return ergibt, wird dieser Wert an den Code übergeben, der die Funktion aufgerufen hat.

Diese Funktion schreibt einen Wert in den HTML-Code, gibt aber nichts zurück.

Quelle

2016-07-30 18:29:29 David

danke für diesen Kommentar – lucyb

Wie Werte von externen Javascript-Funktion zurückgegeben werden

Antwort

Verwandte Themen