0

Recently I've been developing an application that allows a user to enter a stock symbol on a webpage and it returns some data from the Yahoo finance API. I can get the data fine and want to display it in a table. But right when I call appendChild it displays the data perfectly on the page and then in about a second it is gone! I figured I would post this question here since I've never seen anything like this before. Also the other strange thing that if I don't have the confirm message right after the appendChild line it seems like it doesn't even go to the callback method at all. Can anyone help me figure out what is going on and why my data shows up for a second and then is gone the next? Does this have something to do with the HTML tree?

Here is my complete code:

   <!DOCTYPE html>
<html>
<head>
        <title>Public Stock Ticker and Selection</title>
        <meta charset="utf-8"</meta>
        <link rel="stylesheet" type="text/css" href="mashsheet.css">
        <div id="headerdiv">Diversified Stocks and Securities</b>
           <div id="imagediv">
              <img id="cnnimg" src="cnn.jpg" alt="Sorry" height="80" width="140"/img>
              <img id="appleimg" src="apple.jpg" alt="No Apple" height="100" width="120"/img>
                  <img id="microimg" src="microsoft.jpg" alt="No Micro" height="100" width="150"/img>
                  <img id="amaimg" src="amazon.jpg" alt="No amazon" height="70" width="200"/img>
                  <img id="nationimg" src="nationwide.jpg" alt="No nationwide" height="50" width="240"/img>
                  <img id="huntingtonimg" src="huntington.jpg" alt="No huntington" height="70" width="160"/img>
                  <img id="ciscoimg" src="cisco.gif" alt="No cisco" height="70" width="160"/img>
                  <img id="ibmimg" src="ibm.jpg" alt="No ibm" height="70" width="160"/img>
                </div>
           <p id="headdescription"> - A quick and easy place to find up to date stock information about your favorite companies!</p>
             </div>
</head>
<body>
<p>Enter the name of the stock you are interested in below and then click the submit button
     to get back a wealth of information including trades, gains, losses, and more.</b></p>
<form id="stockInput">
Stock Name: <input type="text" id="stockTextBox">
<input type="submit" id="submitButton" value="Submit">
</form>
</b>

<table id="stocktable"
<tr> <th scope="col">Stock Name</th>
     <th scope="col">Price</th>
     <th scope="col">Symbol</th>
     <th scope="col">Ts</th>
     <th scope="col">Type of Stock</th>
     <th scope="col">UTC Time</th>
     <th scope="col">Volume</th>
</tr>
<tr> <th id="name" scope="row"></th>
<th id="price" scope="row"></th>
<th id="symbol" scope="row"></th>
<th id="ts" scope="row"></th>
<th id="typeofstock" scope="row"></th>
<th id="utctime" scope="row"></th>
<th id="volume" scope="row"></th>
</tr>     
</table>
<label id="stockLabel"></label>
<script>

var submitButton = document.getElementById("submitButton");
submitButton.addEventListener('click', actionPerformed, false);

function actionPerformed(e)
{
    var textValue = document.getElementById("stockTextBox").value;
    var script = document.createElement('script');
    script.setAttribute('src',"http://finance.yahoo.com/webservice/v1/symbols/"+textValue+"/quote?format=json&callback=myCallBack");

    document.body.appendChild(script);
    confirm("You got information for " + textValue + "stock!");
 }
 function myCallBack(data)
 {

   document.getElementById("name").innerHTML = data.list.resources[0].resource.fields.name;
   document.getElementById("price").innerHTML = data.list.resources[0].resource.fields.price;
   document.getElementById("symbol").innerHTML = data.list.resources[0].resource.fields.symbol;
   document.getElementById("ts").innerHTML = data.list.resources[0].resource.fields.ts;
   document.getElementById("typeofstock").innerHTML = data.list.resources[0].resource.fields.type;
   document.getElementById("utctime").innerHTML = data.list.resources[0].resource.fields.utctime;
   document.getElementById("volume").innerHTML = data.list.resources[0].resource.fields.volume;

 }

</script>
</body>
</html>
4

2 回答 2

3 
<input type="submit" id="submitButton" value="Submit">

这是一个提交按钮。当您按下提交按钮并且不取消它时，它会提交页面。您<form>没有action，因此使用当前URI。您<form>没有方法，因此使用GET。您<input>没有名称，因此您看到的所有更改都是?添加到URI中的。

于 2013-11-01T03:01:16.453 回答
0

尝试将确认消息置于超时...

document.body.appendChild(script);
setTimeout(function(){
    confirm("You got information for " + textValue + "stock!");
}, 0);
于 2013-11-01T02:48:10.047 回答