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

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

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

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

CSS

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

Q&A

1回答

7527閲覧

要素削除してもgetComputedStyle()のエラーを出ないようにするためには?

syou_0615

総合スコア5

JavaScript

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

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

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

CSS

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

0グッド

1クリップ

投稿2020/11/23 12:07

下記のJavaScriptのコードの、pdiv.removeChild(numButton);(2箇所存在します)でpdivからnumButton要素を削除すると、以下のようなエラーがでます。

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

var nBStyle = document.defaultView.getComputedStyle(nB);が原因ですが、どうすればいいのでしょうか?

JavaScript

1var PassSec; 2 3 function chgImg(pdiv){ 4 //canvasの描画 5 var canvas = document.getElementById("screen"); 6 var context = canvas.getContext("2d"); 7 canvas.width = 460; 8 canvas.height = 345; 9 context.fillStyle = "#000000"; 10 context.rect(0,0,canvas.width,canvas.height); 11 context.fill(); 12 13 //canvasからimgに変換 14 var jpg = canvas.toDataURL(); 15 var newImg = document.createElement("img"); 16 newImg.src = jpg; 17 pdiv.replaceChild(newImg, canvas); 18 } 19 20 function Start(pdiv){ 21 //タイトル 22 var newText = document.createElement("h1"); 23 var newTContent = document.createTextNode("Simple Game"); 24 newText.appendChild(newTContent); 25 newText.id = "title"; 26 pdiv.appendChild(newText); 27 28 //スタートボタン 29 var newSButton = document.createElement("button"); 30 var newSContent = document.createTextNode("START"); 31 newSButton.appendChild(newSContent); 32 newSButton.id = "start"; 33 pdiv.appendChild(newSButton); 34 } 35 36 function showPassage(){ 37 PassSec++; 38 39 var sec = PassSec % 60; 40 var min = parseInt(PassSec / 60); 41 42 if(sec <= 9){ 43 sec = "0" + sec; 44 } 45 46 var count = min + ":" + sec; 47 document.getElementById("watStyle").innerHTML = count; 48 } 49 50 function Move(){ 51 do{ 52 //位置決め 53 function getRandom(){ 54 return Math.random(); 55 } 56 var x = getRandom(); 57 var y = getRandom(); 58 }while((x * 429 > 352 && y * 324 > 287) || (x * 429 > 366 && y * 324 < 30)); //終了ボタンやタイマーと重なったらもう一度 59 var nB = document.getElementById("numbut"); 60 var nBStyle = document.defaultView.getComputedStyle(nB); 61 nB.style.left = nBStyle.left; 62 nB.style.top = nBStyle.top; 63 nB.style.left = x * 429 + "px"; 64 nB.style.top = y * 324 + "px"; 65 } 66 67 window.onload = function(){ 68 var pdiv = document.getElementById("parent-div"); 69 chgImg(pdiv); 70 Start(pdiv); 71 72 document.getElementById("start").addEventListener("click", function(){ 73 //前画面の要素削除 74 pdiv.removeChild(title); 75 pdiv.removeChild(start); 76 77 //時間経過 78 var watch = document.createElement("p"); 79 watch.id = "watStyle"; 80 pdiv.appendChild(watch); 81 watch.innerHTML = "0:00"; 82 PassSec = 0; 83 PassSecID = setInterval("showPassage()", 1000); 84 85 //数字ボタンの変遷(ゲーム内容) 86 var numButton = document.createElement("input"); 87 numButton.type = "button"; 88 numButton.value = "01"; 89 num = numButton.value; 90 numButton.id = "numbut"; 91 pdiv.appendChild(numButton); 92 Move(); 93 timer = setInterval("Move()", 1000); 94 numButton.onclick = function(){ 95 clearInterval(timer); 96 if(num < 9){ 97 numButton.value = "0" + ++num; 98 }else{ 99 numButton.value = ++num; 100 } 101 Move(); 102 timer = setInterval("Move()", 1000); 103 if(numButton.value > 20){ 104 pdiv.removeChild(numButton); 105 pdiv.removeChild(newEButton); 106 107 } 108 } 109 110 //終了ボタン 111 var newEButton = document.createElement("button"); 112 var newEContent = document.createTextNode("Give up"); 113 newEButton.appendChild(newEContent); 114 newEButton.id = "give-up"; 115 pdiv.appendChild(newEButton); 116 newEButton.onclick = function(){ 117 pdiv.removeChild(numButton); 118 pdiv.removeChild(newEButton); 119 clearInterval(PassSecID); 120 pdiv.removeChild(watch); 121 } 122 }); 123 }

CSS

1#parent-div{ 2 position: relative; 3 width: 460px; 4 height: 345px; 5} 6 7#title{ 8 color: #00bfff; 9 font-family: sans-serif; 10 font-size: 45px; 11 text-align: center; 12 position: absolute; 13 top: 70px; 14 left: 0; 15 right: 0; 16 margin: auto; 17} 18 19#start{ 20 position: absolute; 21 top: 230px; 22 left: 0; 23 right: 0; 24 margin: auto; 25} 26 27#give-up{ 28 position: absolute; 29 top: 315px; 30 left: 390px; 31} 32 33#numbut{ 34 position: absolute; 35 left: 0; 36 top: 0; 37} 38 39#watStyle{ 40 position: absolute; 41 left: 405px; 42 top: 5px; 43 color: yellow; 44 margin: 0; 45}

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7 <body> 8 <div id="parent-div"> 9 <canvas id="screen"></canvas> 10 </div> 11 <script src="main.js"></script> 12 </body> 13</html>

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

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

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

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

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

guest

回答1

0

ギブアップしたあともMove()が呼ばれ続けるせいじゃないでしょうか。
ギブアップしたときに、clearInterval()してみたらどうでしょう?

投稿2020/11/23 13:30

gpsoft

総合スコア1323

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問