0

最近、ユーザーが Web ページに銘柄記号を入力できるようにするアプリケーションを開発しており、Yahoo ファイナンス API からいくつかのデータを返します。私はデータをうまく取得でき、それを表に表示したいと考えています。しかし、appendChild を呼び出すと、データがページに完全に表示され、約 1 秒で消えてしまいます。このようなものを見たことがなかったので、ここにこの質問を投稿すると思いました。また、appendChild 行の直後に確認メッセージがない場合、コールバック メソッドにまったく移動していないように見えるという他の奇妙なこともあります。何が起こっているのか、なぜ私のデータが一瞬表示され、次に消えてしまうのかを理解するのを手伝ってくれる人はいますか? これは HTML ツリーと関係がありますか?

ここに私の完全なコードがあります:

   <!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>がないため、現在の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 に答える