Javascript output - NaN message

Question

Javascript output - NaN message

Can anyone help me solve this problem.
I tried to output the results of the elements using document.getElementById("XXXout").innerHTML=XXXto populate the table, but the values returned as NaN(as shown in the figure below). I tried a couple of hours to solve this problem, but I still stick to this. Please help me!

var porfolio = function() {
  var ExpectReturnofStock = $("#ExpectReturnofStockin").val();
  var StdStock = $("#StdStockin").val();
  var StdBond = $("#StdBondin").val();
  var ExpectReturnofBond = $("#ExpectReturnofBondin").val();
  var CorreSB = $("#CorreSBin").val();
  var rf = $("#rfin").val();
  var WB = $("#WBin").val();
  var wss = 1 - WB;
  WS = parseFloat(wss);
  var ExpectReturnofPorfolio = (WB * ExpectReturnofBond + WS * ExpectReturnofStock).toFixed(2);
  var StdPorfolio = (Math.pow((Math.pow(WS * StdStock, 2) + Math.pow(WB * StdBond, 2) + 2 * WS * StdStock * WB * StdBond * CorreSB), 1 / 2)).toFixed(2);
  var sp = ((ExpectReturnofPorfolio - rf) / StdPorfolio).toFixed(2);
  document.getElementById("WSout").innerHTML = WS;
  document.getElementById("ExpectReturnofPorfolioout").innerHTML = ExpectReturnofPorfolio;
  document.getElementById("StdPorfolioout").innerHTML = StdPorfolio;
  document.getElementById("spout").innerHTML = sp;

};

<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->


</head>

<body>
  <p>Exchange Rates</P>
  <div class='comment-input'>
    <table border="1">
      <tr>
        <th>Stock Fund:</th>
        <td>Expect Return:</td>
        <td>
          <input type="number" id="ExpectReturnofStockin" size="12" value="">
        </td>
        <td>Standard Deviation:</td>
        <td>
          <input type="number" id="StdStockin" size="12" value="">
        </td>
      </tr>
      <tr>
        <th>Bond Fund:</th>
        <td>Expect Return:</td>
        <td>
          <input type="number" id="ExpectReturnofBondin" size="12" value="">
        </td>
        <td>Standard Deviation:</td>
        <td>
          <input type="number" id="StdBondin" size="12" value="">
        </td>
      </tr>
      <tr>
        <th></th>
        <td>Correlation:</td>
        <td>
          <input type="number" id="CorreSBin" size="12" value="">
        </td>
        <td>Risk Free Rate:</td>
        <td>
          <input type="number" id="rfin" size="12" value="">
        </td>
      </tr>
    </table>
  </div>
  </br>
  </br>
  <div class='comment-output'>
    <table border="1">
      <tr>
        <th>Porfolio</th>
        <th>Weight Stock</th>
        <th>Weight Bond</th>
        <th>Expect Return</th>
        <th>Standard Deviation</th>
        <th>Sharpe</th>
      </tr>
      <tr>
        <td>1</td>
        <td id="WSout" size="auto"></td>
        <td>
          <input type="text" id="WBin" size="auto">
        </td>
        <td id="ExpectReturnofPorfolioout" size="auto"></td>
        <td id="StdPorfolioout" size="auto"></td>
        <td id="spout" size="auto"></td>
      </tr>
    </table>
  </div>
  <input type="button" value="Count Words" onclick="porfolio();">
  <p class='WSout'></p>
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="../Fin380Html/fin380.js"></script>
</body>

</html>

Run code Hide result

+4

javascript jquery html

Shaogeng wei Feb 02 '16 at 0:59

source share

1 answer

hamobi · Accepted Answer · 2016-02-02T01:57:14+0000

without overwriting all the code. You have a lot of problems here because you do the maths line by line.

, val() toFixed(), . .. .

$("#test").click(function(){
  var num1 = $('#number1').val();
  var num2 = $('#number2').val();

  // we'll get "12" instead of 3
  alert(num1 + num2);   

  // we convert the text into actual numbers here
  num1 = parseFloat(num1);
  num2 = parseFloat(num2);

  // now since we're dealing with numbers.. we'll get 3
  alert(num1 + num2);
});

<input id="number1" value="1" />
<input id="number2" value="2" />
<input type='button' id="test" value="test!" />

, https://jsfiddle.net/svaq90t3/

Javascript output - NaN message

More articles: