• 締切済み

Javascriptの代入バグ?

Javascriptの代入バグ? 下記の3,4行目なんですが、3行目に特に意味はないように見えるんですが、 3行目をコメントアウトするとエラーになります。 一体どういうことなんでしょうか? 参照してるときに何かしているのでしょうか? どなたか分かる方がいたら教えていただけると助かります。 1:  var ele = document.createElement("div"); 2:  var tID = []; 3:  ele.id = telopData[i].id; 4:  tID.push(telopData[i].id);

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

思い違いか、ポカミスだと思います。 補完して検証 var telopData =[{id:"hoge"}]; var i = 0; var ele = document.createElement("div"); var tID = []; ele.id = telopData[i].id; tID.push(telopData[i].id);

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 【javascript 文法】値渡し?参照渡し?

    以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し?それとも値渡し? と混乱しています。 この辺のところを、教えてください。お願いいたします。

  • 配列 代入

    JavaScript初心者です。 配列の代入で困っています。 var nums=new Array(); for(var i=0;i<3;i++){ nums[i]=i; // ☆ } // nums [0,1,2] ☆の行(コード)をnums.push=i; とするとnumsに2しか入っていないのですが、どういう仕組みでしょうか? よろしくお願いします。

  • 下の様にjavaScriptでボタンを追加したいのですが、

    下の様にjavaScriptでボタンを追加したいのですが、 onclickイベントがHTMLにかかれません。 どうすればよろしいでしょうか。 よろしくお願いします。 var ele = document.createElement('input'); ele.type = 'button'; ele.value = 'ご意見へ'; ele.name = 'fNext'; ele.onclick = "sendRequest('FE0041')"; objct[0].parentNode.appendChild(ele);

  • javascriptで困っています。教えてください

    javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){      this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか?教えてください。

  • Javascriptの変数の中に変数を代入するには

    Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または  + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>

  • このJavaScriptソースを解説して下さい

    JavaScript勉強中です。とあるサイトのソースの一部なのですが 何が書いてあるのかわかりません。 どなたか解説してください。 ----------ソースここから---------- <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-23877599-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> ----------ソースここまで---------- 全体的にわからないのですが、1行目だけでも教えてください。 var宣言で、論理和?(||)が使われてて、さらに配列?らしき括弧が続いてます。 これはなんという構文なのですか?

  • javascriptで困っています

    javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作 ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか?少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得 できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を 取得できます 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8"> <!-- function init() { var panel_board = document.getElementById("panel_board"); panel_board.addEventListener("touchstart", function(e){ //クリックしたの場所のマス目 var x = e.touches[0].pageX; var y = e.touches[0].pageY; // 新規に要素div(タグ)を生成 var ele = document.createElement("div"); //idをつける ele.id = "move_panel"; //生成した要素の位置を決める ele.style.left=x+"px"; ele.style.top=y+"px"; // panel_boardに生成した要素を追加 panel_board.appendChild(ele); }, false); panel_board.addEventListener("touchmove", function(e){ //動いた位置を取得 var xx = e.touches[0].pageX; var yy = e.touches[0].pageY; //move_panelを動かす document.getElementById("move_panel").style.left = xx+'px'; document.getElementById("move_panel").style.top = yy+'px'; //位置を表示 document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = xx; document.getElementById("txt2").innerHTML = yy; }, false); panel_board.addEventListener("touchend", function(e){ //要素を消す var mp = document.getElementById("move_panel"); mp.parentNode.removeChild(mp); }, false); } // --> </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </body> </html>

  • スクロール付きのdivタグを作成するには

    縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。 下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);

  • 外部javascriptの重複を防ぐには

    簡単なタグを貼り付けるだけで使えるブログパーツを、javascriptで作ろうとしています。 <■コード(1)> <script type="text/javascript" src="http://ex.com/js/test.js"></script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> 上記のように外部JSを読み、そのJSの中でimgタグのonloadイベントを記述し、そのイベントの処理でimgタグの直前にテキストを書き出すようにしています。これはidなどを意識しなくてもタグを貼りつけた場所に出力されるようにするための措置です。 上記は単独で貼り付ける場合はうまくいったのですが、同じコードを複數貼り付けると外部JSの衝突でエラーになります。よって外部JSの読み込みを動的にしてみました。 <■コード(2)> <script type="text/javascript"> var obj=""; obj = document.getElementById("example_tag"); if( !obj ){ var ele = document.createElement("script"); ele.id = "amacusplus_scriptfile"; ele.type = "text/javascript"; ele.src = "http://ex.com/test.js"; document.body.appendChild(ele); } </script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> このソースを同じページ内で二箇所貼り付けると、 今度は動的な外部JSの読み込みとimgタグのonload処理の発生タイミングが微妙なため挙動不審になってしまいました。成功したり失敗したり・・・。 とこのような状況で煮詰まっています。 質問は (1)外部JSの動的な読み込みの後に、明示的にimgのonloadイベントを起こすことはできないか? がメインですが、他のアプローチで解決できればそれでもいいので (2)<script>~</script>内に書いたjavascript内で、現在位置を知る方法(scriptエレメントを知る方法) (3)複数回読まれても重複を起こさない外部JSやその読み込み方法の書き方 などなにかヒントになるようなことを教えて頂きたいのです。 よろしくお願いします。

  • JavaScriptについて

    以下のコードはテキストボックスに文字を書き込み追加ボタンを押すとボタンのしたに書き込んだ内容が追加されるというものです なぜか追加ボタンを押しても反応がありません なぜでしょうか? <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <h1>ToDoメモ</h1> <!--新規追加ボックス--> <div id = "new_div"> <input id = "new_txt" type = "text" value = "" style = "width:250px" size = "40"/> <br /><input id = "add_btn" type = "button" value="追加" /> </div> <!--項目一覧--> <div id = "items_div"></div> <!--項目の操作パネル--> <div id = "control_div"> <input id = "done_btn" type = "button" value = "削除"> </div> <script> function $(id) { return document.getElementById(id); } //変数の初期化 var todo_div = $(todo_div); var db; var cbItems = []; //ドキュメント読み込み時のイベント設定 window.onload = function() { if (window.openDatabase == undefined) { alert("Web Databaseに対応していません"); return } //データベースを開く db = window.openDatabase("todo.db", "1.0", "ToDo", 1024 * 1024); db.transaction(function(tr) { //テーブルがなければ作る var query = "CREATE TABLE IF NOT EXISTS todo_tbl(" + " todo_id INTEGER PRIMARY KEY, " + " memo TEXT NOT NULL " + ")"; tr.executeSql(query, [], loadItems); }); }; // アイテムの読み込み実行 function loadItems() { db.transaction(function(tr) { var query = "SELECT * FROM todo_tbl" ;   tr.executeSql(query, [] ,loadItems_onResult); }); } //アイテムが読み込まれたときのイベント function loadItems_onResult(tr, rs) { //すべての子ノードを削除 while(items_div.hasChildNodes()){ items_div.removeChild(items_div.lastChild); } cbItems = []; //チェックボックスの作成 for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); var todo_id = row.todo_id; var memo = row.memo; //チェックボックスの追加 var cb = document.createElement("input");//チェックを作成 cb.type = "checkbox"; cb.value = todo_id; cbItems.push(cb); var label = document.createElement("span");//ラベル作成 label.innerHTML = memo; var line = document.createElement("div");//一行作成 line.appendChild(cb); //チェックを追加 line.appendChild(label); //ラベルを追加 items_div.appendChild(line); //項目にlineを追加 } } //追加ボタンを押したときのイベント $("add_btn").onclick = function() { var text = $("new_txt").value; $("new_txt").value = ""; db.transaction(function(tr) { var query = "INSERT INTO todo_tbl(memo)VALUES(?)"; tr.executeSql(query,[text],loadItems); }); }; //削除を押した時のイベント $("done_btn").onclick = function() { db.transaction(function(tr) { for (var i in cbItems) { var cb = cbItems[i]; if(!cb.checked) continue; var query = "DELETE FROM todo_tbl WHERE todo_id=?"; tr.executeSql(query,[cb.value]); } },function(){ alert('削除失敗') },loadItems); }; </script> </body> </html>