Javascript初心者のためのオセロ盤面作成方法
- Javascript初心者の方へのアドバイスとして、オセロの盤面の作成方法をまとめました。
- 盤面の上にaからhまでの文字を表示する方法や、ボードの左に1から8までの数字を表示する方法を解説しています。
- 具体的なコードとCSSの記述も示しており、初心者でも分かりやすく学習することができます。
- ベストアンサー
Javascript初心者です助言おねがいします。
オセロを作成しています。 盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。 Javascript // ボードの上に a から h までの文字を表示する const letters = document.createElement("div"); letters.classList.add("letters"); for (let i = 0; i < 8; i++) { const letter = document.createElement("div"); letter.classList.add("letter"); letter.textContent = String.fromCharCode(97 + i); letters.appendChild(letter); } // ボードの左に 1 から 8 までの数字を表示する const numbers = document.createElement("div"); numbers.classList.add("numbers"); for (let i = 1; i <= 8; i++) { const number = document.createElement("div"); number.classList.add("number"); number.textContent = i; numbers.appendChild(number); } board.appendChild(numbers); // 盤面を作成 for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); board.appendChild(cell); cells[`${row}-${col}`] = cell; } board.appendChild(letters); } css .letters { display: flex; justify-content: space-between; margin-bottom: 8px; } .letter { width: 12.5%; text-align: center; } .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } .number { height: 12.5%; text-align: center; }
- yahom5079
- お礼率0% (0/8)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうでしょうか <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロ盤面</title> <style> #board { display: grid; grid-template-columns: repeat(9, 1fr);/* 9列 */ grid-template-rows: repeat(9, 1fr);/* 9行 */ grid-gap: 1px;/* グリッドセル間のスペース */ width: 400px; height: 400px; } .cell { background-color: green; text-align: center; display: flex; justify-content: center; align-items: center; line-height: 1; } .auxiliary{ text-align: center; display: flex; justify-content: center; align-items: center; line-height: 1; } </style> </head> <body> <div id="board"></div> <script> const board = document.getElementById("board"); const cell = document.createElement("div"); // 左上の何もない空間 board.appendChild(cell); // a ~ hの連番 const aCharCode = 97; // 'a'のASCIIコード const hCharCode = 104; // 'h'のASCIIコード for (let i = aCharCode; i <= hCharCode; i++) { const cell = document.createElement("div"); cell.classList.add("auxiliary"); cell.textContent = String.fromCharCode(i); board.appendChild(cell); } for (let i = 0; i < 8; i++) { // 1 ~ 8の連番 const cell = document.createElement("div"); cell.classList.add("auxiliary"); cell.textContent = i + 1; board.appendChild(cell); for (let j = 0; j < 8; j++) { // boardのgrid const cell = document.createElement("div"); cell.classList.add("cell"); board.appendChild(cell); } } </script> </body> </html>
その他の回答 (2)
- retorofan
- ベストアンサー率33% (328/974)
回答No.1 は誤回答してしまいました。 お詫びして訂正いたします。 [修正前] .number { height: 12.5%; text-align: center; } [修正後] .number { height: 12.5%; }
- retorofan
- ベストアンサー率33% (328/974)
CSSのクラスの一部を修正すれば良いです。 [修正前] .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } [修正後] .numbers { display: flex; justify-content: space-between; margin-right: 8px; }
関連するQ&A
- javascript マウスイベント
動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。
- ベストアンサー
- JavaScript
- javascript でリンクを動的に変更する方法
下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。 質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。 下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。 サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- var i = 1; var maxrows = 10; function hage() { i++; // Tbody への参照を取得します var mybody=document.getElementById("histTablebody"); mystore_row=document.createElement("TR"); mystore_row.setAttribute("id","histrow"+i); mystore_cell=document.createElement("TD"); mystore_cell.setAttribute("id","num"); currenttext=document.createTextNode(i); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); currenttext=document.createTextNode("店舗ID"); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_id" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_form=document.createElement("INPUT"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_name" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); //mystore_cell=document.createElement("a"); mystore_row.appendChild(mystore_cell); mybody.appendChild(mystore_row); document.register.delrow.disabled=false; if(i>=maxrows){ document.register.addrow.disabled=true; } } var hige = function() { var mytable=document.getElementById("histTablebody"); var removeTable=document.getElementById("histrow"+i); mytable.removeChild(removeTable); i--; if(i==1){ document.register.delrow.disabled=true; } // 追加ボタンを有効にする document.register.addrow.disabled=false; } var result = function() { alert(''); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&no=[]','search_store1','width=540,height=540')">検索</a>] </td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- 動的に作成したテキストボックスの値をaspへ
いつもお世話になっております。 javaスクリプトで動的にテキストボックスを作成し、 実行ボタンを押すと値をhiddenでtest.aspへ渡すことは可能でしょうか？ 不可能であれば。。。。 test.aspへ値を渡す良い方法がありましたら、ご教示くださますようお願いいたします。 環境：ＩＩＳ7.5 クラッシックＡＳＰ 以下、ソースを参照してください。。。 ＊自宅では環境がないため、 印刷を見ながら手で入力しました。 確認して投稿しましたが。。。打ち間違い等あったらご指摘くださいませ＞＜ --------以下ソース抜粋 addtext.asp ------------------- <script language="JavaScript"> <!-- function addDev(){ var targetName; var idObj; var tbObj; var devBlockCnt; idObj = document.getElementById("histTablebody"); tdObj = idObj.getElementsByTagName("tbody"); devBlockCnt++; targetName = "devBlock" + devBlockCnt; var mybody = document.getElementById("histTablebody"); tbcurrent_row = document.createElement("TBODY"); tbcurrent_row.setAttribute("id",targetNam); mycurrent_row=document.createElement("TR"); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mycurrent_row=document.createElement("TR"); mycurrent_row.setAttribute("id",histrow1); mycurrent_cell=document.createElement("TD"); mycurrent_form=document.createElement("INPUT"); mycurrent_form.setAttribute("type","TEXT"); mycurrent_form.setAttribute("name","devEntry1"); mycurrent_form.setAttribute("id","devEntry1"); mycurrent_form.setAttribute("value",""); mycurrent_cell.appendChild(mycurrent_form); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mybody.appendChild(tbcurrent_row); } //--> </script> <html> <head> <title>TEST</title> </head> <body> <div align="center"> <table border="1"> <tr> <td align="left" valign="middle">入力1</td> <td> <form name="fmDev"> <div> <table border="0" id="histTablebody"> <tbody id="devBlock1"> <tr><td></td></tr> <tr id="histrow1"> <td><input type="text" name="devEntry1" id="devEntry1"> </td> </tr> </tbody> </table> </div> <table> <tr><td><input type="button" id=addDevid value="追加" onClick="addDev();"> </td> </tr> </table> </form> </td> </tr> <form name="fmHoki"> <tr> <td align="left" valign="middle">入力2</td> <td align="left"><textarea row="5" name="hokiTXT" cols="60"></textarea></td> </tr> </form> </table> </div> <teble border="0"> <tr> <form action="test.asp" method="post" name="fm2"> <tr><input type="submit" value="登録実行" alt=""></td> <input trype="hidden" name="hokiTXT"> </form> <form name="fm3"> <td><input type="button" value="戻る" onclick="location.href='menu01.asp';"></td> </form> </tr> </teble> </body> </html> <SCRIPT LANGUAGE="vbscript"> '--------------------------------------- ' test.asp へ行く前の処理 '--------------------------------------- Sub fm2_OnClick() Dim i Document.fm2.hokiTXT.value = Document.fmHoki.hokiTXT.value '--ここで動的に作成したテキストボックスの値をtest.aspへ渡す処理が 'わかりません。。。。。 'debug確認用 ↓ for i=0 to document.fmDev.length msgbox document.fmDev.element(i).name,,"test" msgbox document.fmDev.element(i).value,,"test" next End Sub </SCRIPT>
- ベストアンサー
- Microsoft ASP
- JavaScript のTypeError
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at add というエラーで困っています。 初心者向け動画 https://www.youtube.com/watch?v=E08jeQBa1D0 さんでそのままのコードを打ったつもりですが、「テキストボックスに文字を入れて、エンターを押すと値がリストに追加されていく」という動きができません。 コードはこちらです。（動画のままを打ったつもりです） [HTML] <body class="bg-light"> <div class="container w-75"> <h1 class="text-center text-info my-4"> todo</h1> <form id="form" class="mb-4"> <input type="text" id="input" placeholder="todoを入力" autocomplete="off" class="form-control"> </form> <ul class="list-group text-secondary"></ul> </div> <script src="index.js"></script> </body> [JS] const form = document.getElementById("form") const input = document.getElementById("input") const ul = document.getElementById("ul") form.addEventListener("submit", function (event) { event.preventDefault() console.log(input.value) add() }) function add() { const li = document.createElement("li") li.innerText = input.value li.classList.add("List-group-item") ul.appendChild(li) //ここでエラー input.value = "" } HTMLを生成するときにulがなくて追加できない、という意味であってるでしょうか。 何が原因なのか知りたいです。
- ベストアンサー
- JavaScript
- tableの生成
お世話になります。 以下のソースはテーブルを生成するサンプルソースなんですけど、tdの中に配列の要素をきちんと表示させることが出来ません。 どうしたらちゃんと表示させることが出来るかご教授いただけないでしょうか？ *今は配列の要素がtdの中に全部入ってしまっている状態です。 <html> <head> <title>サンプルコード</title> <script> mylist = new Array( // データ定義 "Ａさんのホームページ", "Ｂさんのホームページ", "Ｃさんのホームページ", "Ｄさんのホームページ", "Ｅさんのホームページ", "Ｆさんのホームページ" ); function start() { var mybody=document.getElementsByTagName("body").item(0); //全ての body 要素リストをこのようにして取得// mytable = document.createElement("TABLE"); mytablebody = document.createElement("TBODY"); for(j=0;j<3;j++) { mycurrent_row=document.createElement("TR"); for(i=0;i<2;i++) { mycurrent_cell=document.createElement("TD"); currenttext=document.createTextNode(mylist); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body> <script type="text/javascript"> start() </script> </body> </html>
- ベストアンサー
- JavaScript
- javaScriptでカレンダーを作成したい
カレンダーをjavaScriptで作成しております。 tableをflexして２段のカレンダーです。 ①次へや前へのボタンを押すと前のが削除されず下へ増えていってしまいます。 ②矢印を２回押したら次の次の月を表示したいのができません。 ご教授お願いいたします。 Java Script let topicsData = [ ["1", "1日です"], ["4", "4日です"], ["9", "9日です"], ["15", "15日です"], ["27", "27日です"] ] function showProcess(year, month) { const lastday = new Date(year, month + 1, 0).getDate() + 1; const topics = new Array(); for (i = 0; i <= lastday; i++) { topics[i] = ""; } for (i = 0; i < topicsData.length; i++) { topics[topicsData[i][0]] = topicsData[i][1]; } //HTMLタグをつくる const table = document.getElementById("calendarleft"); for (let i = 1; i <= 15; i++) { let tr = document.createElement("tr"); //tdタグ(日付) let td = document.createElement("td"); td.textContent = i; //tdタグ(曜日) day = new Date(year, month, i); days = day.getDay(); weekjp = new Array("日", "月", "火", "水", "木", "金", "土"); weeks = weekjp[days]; let tdWeek = document.createElement("td"); tdWeek.innerText = weeks; //tdタグ(トピックス) let topicsText = document.createElement("td"); topicsText.innerText = topics[i]; console.log(topics[i]); //HTMLに表示させる document.querySelector('#header').innerHTML = (month + 1) + "月"; table.appendChild(tr); tr.appendChild(td); tr.appendChild(tdWeek); tr.appendChild(topicsText); } const table2 = document.getElementById("calendarright"); for (let i = 16; i < lastday; i++) { let tr = document.createElement("tr"); //tdタグ(日付) let td = document.createElement("td"); td.textContent = i; //tdタグ(曜日) day = new Date(year, month, i); days = day.getDay(); weekjp = new Array("日", "月", "火", "水", "木", "金", "土"); weeks = weekjp[days]; let tdWeek = document.createElement("td"); tdWeek.innerText = weeks; //tdタグ(トピックス) let topicsText = document.createElement("td"); topicsText.innerText = topics[i]; console.log(topics[i]); //HTMLに表示させる document.querySelector('#header').innerHTML = (month + 1) + "月"; table2.appendChild(tr); tr.appendChild(td); tr.appendChild(tdWeek); tr.appendChild(topicsText); } } const today = new Date(); let showDate = new Date(today.getFullYear(),today.getMonth(),1); window.onload = function () { showProcess(today.getFullYear(),today.getMonth()); }; function prev() { showProcess(showDate.getFullYear(),showDate.getMonth()-1); } function next() { showProcess(showDate.getFullYear(),showDate.getMonth()+1); }
- ベストアンサー
- JavaScript
- DOM？ tableの記述について
よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか？ イメージとしては・・ A01 A02 A03 B01 B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか？どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでカレンダーを作る方法
下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
- ベストアンサー
- その他（学問・教育）
- HTML5,JavaScriptのアプリについて
現在Monacaでスマホのアプリを作っております 3×3のパズルを作ったのですがわからない点があるので教えてください コードは <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <style> *{ margin:0; padding:0; position: absolute;} #title { background-color: blue; color: white; padding:3px; font-size:14px; width:320px; height:14px; } #game_canvas { top:20px; width:320px; height:320px; } </style> </head> <body> <div id="title">8puzzle</div> <canvas id="game_canvas" width="320" height="320"></canvas> <script> //設定 var main_image = "img/photo.png"; var panels = []; var cell_w = 320 / 3; //横に4分割 var cell_h = 320 / 3; //縦に4分割 var pos_array = [[-1,0],[1,0],[0,-1],[0,1]]; //上下左右の座標 //Canvasのコンテキストを取得 var canvas = document.getElementById("game_canvas"); var con = canvas.getContext("2d") //画像の読み込み var image = new Image(); image.src = main_image; image.onload = function() { con.drawImage(image,0,0); setTimeout(shufflePanel,3000); } //パネルのシャッフル function shufflePanel() { //パネルを初期化 for (var i = 0; i < 9; i++) { panels[i] = i; } //シャッフル for (var j = 0; j < 9 ; j++) { var r = Math.floor(Math.random() * 9); var tmp = panels[r]; panels[r] = panels[j]; panels[j] = tmp; } drawPanels(); } //パネルを番号に応じて描画 function drawPanels() { for (var i = 0; i < 9; i++){ var no = panels[i]; var pcol = no % 3; var prow = Math.floor(no / 3); var px = pcol * cell_w; var py = prow * cell_h; var tx = (i % 3) * cell_w; var ty = Math.floor(i / 3) * cell_h; if (no == 8) { //穴の表示 con.beginPath(); con.fillStyle = "#CCCCCC"; con.fillRect(tx, ty, cell_w, cell_h); } else { //画像を切り取って表示 con.drawImage(image, px, py, cell_w, cell_h, tx, ty, cell_w, cell_h); } //枠を描画 con.beginPath(); con.moveTo(tx + cell_w, ty); con.lineTo(tx, ty); con.lineTo(tx, ty + cell_h); con.strokeStyle = "#999999"; con.stroke(); } } //ユーザーのtouchイベントに反応する canvas.ontouchstart = function(e) { //for iPhone if (e.touches.length > 0){ var t = e.touches[0]; checkPanelXY(t.clientX, t.clientY); } e.preventDefault(); }; canvas.onmousedown = function(e) { //for PC checkPanelXY(e.clientX, e.clientY); }; function checkPanelXY(sx, sy) { //タップされたパネルを取得する var col = Math.floor(sx / cell_w); var row = Math.floor((sy-20) / cell_h); var no = row * 3 + col; //穴の上なら何もしない if (panels[no] == 8) { return } //穴に接リンしているか確認 for (var i = 0; i < pos_array.length; i++) { var row2 = pos_array[i][0] + row; var col2 = pos_array[i][1] + col; var check = getPanelNo(row2, col2); if (check == 8) { swapPanel(row, col, row2, col2); } } }; //行(row)と列(col)からパネル番号を返す function getPanelNo(row, col) { //範囲外なら-1を返す if (col < 0 || row < 0 || col >= 3 || row >= 3){ return -1; } return panels[row * 3 + col]; } //パネルを入れ替える function swapPanel(row1, col1, row2, col2) { var index1 = row1 * 3 + col1; var index2 = row2 * 3 + col2; var tmp = panels[index1]; panels[index1] = panels[index2]; panels[index2] = tmp; drawPanels(); } </script> </body> </html> です 動くことは動くのですが私の知識だとまだ理想には程遠いです、、、 理想としては 1.パズル完成後「ＣＬＥＡＲ」の表示（ダイアログで表示したいです） 2.完成までかかった時間の表示 3.パズルの画面が中央に来てほしい 4.タブレットで使用したときに画面が小さいのでディバイスごとに適した大きさにしたい 5.今は用意した画像を読み込ませていますが自分で撮った写真などを読み込ませたい 説明がへたくそで申し訳ございません 最優先としては3,4の実装です 3,4を詳しく書くと スマホ、タブレットともに画面の中央に大きく表示ということです 始めたばかりの初心者なのでなるべく噛み砕いて教えていただけると嬉しいです
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
