Q&A
ありがとうございます。できました！すみません、ちなみに、またクリックして元の色に戻すにはどのようなコードを追加したら良いのでしょうか？if文で分けたらいいんですかね？
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<div id="xyz123" style="width:100px; height:100px; background:#0099cc;" onclick="myfunc();" ></div> 5<script type="text/javascript"> 6 function myfunc(){ 7 document.getElementByID("xyz123").style.background="#cc9900"; 8 }; 9 </script> 10 </head> 11</html>
四角形を表示して、その四角形をクリックすると四角形の色が変わるプログラムをかいているのですが、クリックしても何も変わらなくて困っています。このプログラムのどこが間違っているのかご指摘いただけると幸いです。よろしくお願いします。
回答2件
0
js
1// document.getElementByID("xyz123").style.background="#cc9900"; 2// ↓ 3 document.getElementById("xyz123").style.background="#cc9900";
関数は大文字小文字を区別します。
あと、head要素の中にdiv要素があるのもおかしい。（div要素はbody要素の中）
投稿2019/01/17 16:10
総合スコア69407
0
ベストアンサー
以下で如何でしょうか
Javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<script type="text/javascript"> 5 function myfunc(){ 6 document.getElementById("xyz123").style.background="#cc9900"; 7 }; 8 </script> 9 </head> 10<body> 11<div id="xyz123" style="width:100px; height:100px; background:#0099cc;" onclick="myfunc();" ></div> 12</body> 13</html>
投稿2019/01/17 16:10
総合スコア346
以下で如何でしょうか。
<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
function myfunc(){
if (document.getElementById("xyz123").style.background == "rgb(0, 153, 204)") {
document.getElementById("xyz123").style.background="#cc9900";
} else {
document.getElementById("xyz123").style.background="#0099cc";
}
};
</script>
</head>
<body>
<div id="xyz123" style="width:100px; height:100px; background:#0099cc;" onclick="myfunc();" ></div>
</body>
</html>
ありがとうございます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。