質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

4992閲覧

三目並べ『HTML, javascript, css』を使って作りたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/23 02:50

###前提・実現したいこと
HTMLでjavascriptを使って、三目並べを作りたいのですが’○’,'×'が表示されません。どのようにしたら表示されますか。
(*tableタグは使いません。)

###該当のソースコード

HTML

1 2<!DOCTYPE html> 3<html> 4 5<head> 6 <meta charset="UTF-8"> 7 <script src="./Tick-Tack-Toe.js"></script> 8 <link rel="stylesheet" href="./Tick-Tack-Toe.css"> 9</head> 10 11<body> 12 <div id="block"> 13 <button id="b0">b0</button> 14 <button id="b1">b1</button> 15 <button id="b2">b2</button> 16 <button id="b3">b3</button> 17 <button id="b4">b4</button> 18 <button id="b5">b5</button> 19 <button id="b6">b6</button> 20 <button id="b7">b7</button> 21 <button id="b8">b8</button> 22 <div id="result"></div> 23 </div> 24</body> 25 26</html> 27 28 29 30 31 32 33

javascript

1window.addEventListener('load', function () { 2 3 var button = document.getElementById('b0'); 4 var button = document.getElementById('b1'); 5 var button = document.getElementById('b2'); 6 var button = document.getElementById('b3'); 7 var button = document.getElementById('b4'); 8 var button = document.getElementById('b5'); 9 var button = document.getElementById('b6'); 10 var button = document.getElementById('b7'); 11 var button = document.getElementById('b8'); 12 var result = document.getElementById('result'); 13 button.InnerText = "InnerText"; 14 var count = 0; 15 16 b0.addEventListener('click', function () { 17 var ret = judge(); 18 if (ret) { 19 alert(ret); 20 } 21 }) 22 b1.addEventListener('click', function () { 23 var ret = judge(); 24 if (ret) { 25 alert(ret); 26 } 27 }) 28 b2.addEventListener('click', function () { 29 var ret = judge(); 30 if (ret) { 31 alert(ret); 32 } 33 }) 34 b3.addEventListener('click', function () { 35 var ret = judge(); 36 if (ret) { 37 alert(ret); 38 } 39 }) 40 b5.addEventListener('click', function () { 41 var ret = judge(); 42 if (ret) { 43 alert(ret); 44 } 45 }) 46 b6.addEventListener('click', function () { 47 var ret = judge(); 48 if (ret) { 49 alert(ret); 50 } 51 52 }) 53 b7.addEventListener('click', function () { 54 var ret = judge(); 55 if (ret) { 56 alert(ret); 57 } 58 }) 59 b8.addEventListener('click', function () { 60 var ret = judge(); 61 if (ret) { 62 alert(ret); 63 } 64 }) 65 if (count % 2 === 0) { 66 var mark = "◯"; 67 } else { 68 var mark = "✕"; 69 } 70 button.InnerText = mark; 71 count++; 72 function judge() { 73 var winer = null; 74 if (b0 == b1 && b1 == b2 && b0 != "") { 75 winer = c0; 76 } else if (b3 == b4 && b4 == b5 && b3 != "") { 77 winer = b3; 78 } else if (b6 == b7 && b7 == b8 && b6 != "") { 79 winer = b6; 80 } else if (b0 == b3 && b3 == b6 && b0 != "") { 81 winer = b0; 82 } else if (b1 == b4 && b4 == b7 && b1 != "") { 83 winer = b1; 84 } else if (b2 == b5 && b5 == b8 && b2 != "") { 85 winer = b2; 86 } else if (b0 == b4 && b4 == b8 && b0 != "") { 87 winer = b0; 88 } else if (b2 == b4 && b4 == b6 && b2 != "") { 89 winer = b2; 90 } 91 92 var str; 93 if (winer) { 94 str = winer + "の勝ちです。"; 95 } else if (count == 9) { 96 str = "引分けです。"; 97 } else { 98 str = null; 99 } 100 return str;; 101 } 102});

###該当のソースコード

css

1body{ 2 background-color: black; 3} 4 5div { 6 margin: 235px; 7 width: 200px; 8 height: 300px; 9 text-align: content; 10} 11button { 12 width: 60px; 13 height: 60px; 14 font-size: 20px; 15}```ここに言語を入力 16コード
###試したこと 課題に対してアプローチしたことを記載してください ###補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/23 02:56

退会済みユーザー・・・。回答していいか迷いますね。
guest

回答1

0

とりあえず

var button=・・・
で次々にbutton変数を上書きしていますね

追記

元ソースをいかすとこんな感じになりそうです

javascript

1var count=0; 2document.addEventListener('click', function (e){ 3 var senko="o"; 4 var koko="x"; 5 var t=e.target; 6 if(t.nodeName=="BUTTON"){ 7 var mark = count % 2 === 0?senko:koko; 8 if(t.textContent!==senko && t.textContent!==koko){ 9 t.textContent = mark; 10 count++; 11 } 12 var ret = judge(mark); 13 if (ret) { 14 alert(ret); 15 } 16 } 17}); 18function judge(mark) { 19 var b=Array.prototype.map.call(document.getElementsByTagName("button"),function(i){ 20 return i.innerHTML; 21 }); 22 var winer=null; 23 if(b[0]==b[1] && b[0]==b[2] || 24 b[3]==b[4] && b[3]==b[5] || 25 b[6]==b[7] && b[6]==b[8] || 26 b[0]==b[3] && b[0]==b[6] || 27 b[1]==b[4] && b[1]==b[7] || 28 b[2]==b[5] && b[2]==b[8] || 29 b[0]==b[4] && b[0]==b[8] || 30 b[2]==b[4] && b[2]==b[6] ){ 31 winer=mark; 32 } 33 var str=""; 34 if (winer) { 35 str = winer + "の勝ちです。"; 36 } else if (count == 9) { 37 str = "引分けです。"; 38 } 39 return str; 40} 41

勝利後の処理はいれてませんのでご自由に

投稿2017/06/23 02:56

編集2017/06/23 03:27
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問