Q&A
今回のじゃんけん課題に付けたい機能について質問です。
スロットの画像の上に「にこにこマーク」の画像を貼っており、
グーのボタンを押すと、「にこにこマーク」の画像が例えば「グー」に変わるように
画像切り替えのコードを書いているつもりですが、思うように切り替わりません！！
下記のコードでどこか間違いがあれば、ご指摘頂きたいです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="janken_style.css"> <title>じゃんけん</title> <script type="text/javascript"> window.onload=function(){ //ここにJSを記述lang
1コード
function random(max){
//乱数
var num=0;
num = Math.floor(Math.random() * max + 1);
return num;
}
//画像の切り替え関数 ここが思うように動きません！
function changeIMG(){
document.gazo1.scr ="M-j_gu02.png";
}
//☆グーボタン☆
var btn = document.getElementById("gu_btn");
btn.onclick = function(){
var num = random(3)
Computer_gu(num);
result_gu(num);
changeIMG();
}
//コンピューター関数
function Computer_gu(num){
if(num == 1){
document.getElementById("pc").innerHTML = "コンピューター：グー";
}
if(num == 2){
document.getElementById("pc").innerHTML = "コンピューター：チョキ";
}
if(num == 3){
document.getElementById("pc").innerHTML = "コンピューター：パー";
}
}
//結果関数
function result_gu(num){
if(num == 1){
document.getElementById("num").innerHTML = "あいこ";
}
if(num == 2){
document.getElementById("num").innerHTML = "あなたの勝ち";
}
if(num == 3){
document.getElementById("num").innerHTML = "あなたの負け";
}
}
//☆チョキボタン☆
var btn = document.getElementById("cho_btn");
btn.onclick = function(){
var num = random(3)
Computer_cho(num);
result_cho(num);
}
function Computer_cho(num){
if(num == 1){
document.getElementById("pc").innerHTML = "コンピューター：グー";
document.getElementById("gazo").src=img[cnt].src;
}
if(num == 2){
document.getElementById("pc").innerHTML = "コンピューター：チョキ";
}
if(num == 3){
document.getElementById("pc").innerHTML = "コンピューター：パー";
}
}
function result_cho(num){
if(num == 1){
document.getElementById("num").innerHTML = "あなたの負け";
}
if(num == 2){
document.getElementById("num").innerHTML = "あいこ";
}
if(num == 3){
document.getElementById("num").innerHTML = "あなたの勝ち";
}
}
//☆パーボタン☆
var btn = document.getElementById("par_btn");
btn.onclick = function(){
var num = random(3)
Computer_pa(num);
result_pa(num);
}
function Computer_pa(num){
if(num == 1){
document.getElementById("pc").innerHTML = "コンピューター：グー";
}
if(num == 2){
document.getElementById("pc").innerHTML = "コンピューター：チョキ";
}
if(num == 3){
document.getElementById("pc").innerHTML = "コンピューター：パー";
}
}
function result_pa(num){
if(num == 1){
document.getElementById("num").innerHTML = "あなたの勝ち";
}
if(num == 2){
document.getElementById("num").innerHTML = "あなたの負け";
}
if(num == 3){
document.getElementById("num").innerHTML = "あいこ";
}
}
};
</script>
</main> <footer></footer> </body> </html></ul> <center> </br> </br> </br> </br> </br> <div>あなた</div> <li id="gu_btn">グー</li> <li id="cho_btn">チョキ</li> <li id="par_btn">パー</li> </center> </ul> <div id="pc">コンピュータの出した手は？</div> <div id="num">ここに表示されます</div> </CENTER>
回答1件
0
ベストアンサー
lang
1function changeIMG(){ 2 // document.gazo1.scr ="M-j_gu02.png"; 3 document.gazo1.src = "M-j_gu02.png"; 4}
ここはscrではなくsrcですね。単なるスペルミスです。
ところで、他に気になった点としては、Computer_cho関数
lang
1document.getElementById("gazo").src=img[cnt].src;
について、gazoをIDに持った要素が見当たりません。
また変数cntはどこで定義しているのでしょうか。
幸いこのコードではここでエラーが起きても問題はありませんが、よろしくないです。
それから、
lang
1<img src="niconico.jpeg" width="80" height="97" class="niconico_1" img name = "gazo1">
ここで、img要素にimg属性という未定義の属性が指定されています。
書いてあっても問題にはなりませんが、混乱を招く可能性があるので消しておいた方がいいでしょう。
更に、HTML5ではcenterタグは使えません。CSSでセンタリングしてください。
brで見た目を整えるのも推奨されません。理解が及ばないうちは勉強の範囲で使うのもありかもしれませんが、徐々に減らしていくことをお勧めします。
投稿2015/05/04 17:32
総合スコア870
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/06 04:59