下記の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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。