Javascript：ボタンonclickイベントで関数が定義されていませんか？

JSを学んで、この小さな調査を動作させようとしましたが、HTML要素onclickで「関数が定義されていません」というエラーが発生します。なぜ、関数が定義されていて、構文エラーが見つからないように思えるのか分かりません。私はまた、 "ソーダは定義されていません"というエラーを受け取りますが、変数が配列内のオブジェクトとして定義されているようです。Javascript：ボタンonclickイベントで関数が定義されていませんか？

<html> 
<body> 

<h3>What cats are in the room?</h3> 

Sophie: <input type="checkbox" id="sophieCheck"> 
<br></br> 
Soda: <input type="checkbox" id="sodaCheck"> 
<br></br> 
Mr.: <input type="checkbox" id="mrCheck"> 
<br></br> 

<button onclick="catsInTheRoom()">Try it</button> 
<br></br> 

<p id="cats"></p> 


<script> 
function catsInTheRoom() { 

    var myCats = [ soda, mr, sophie ]; 

    if (getElementById("sodaCheck").checked) { 
     myCats[0] = 1; 
    } else { 
     myCats[0] = 0; 
    } 
    if (getElementById("sophieCheck").checked) { 
     myCats[2] = 10; 
    } else { 
     myCats[2] = 0; 
    } 
    if (getElementById("mrCheck").checked) { 
     myCats[1] = 20; 
    } else { 
     myCats[1] = 0; 
    } 

    getElementById("cats").innerHTML = myCats[0] + myCats[1] + myCats[2]; 
} 

</script> 
</body> 
</html>

switch文の数値を使用して、チェックボックスのチェックに基づいて異なるテキストを生成できるように、配列を作成しました。

この簡単なバージョンが働いた：

Sophie: <input type="checkbox" id="sohpieCheck"> 
<br></br> 
Soda: <input type="checkbox" id="sodaCheck"> 
<br></br> 
Mr.: <input type="checkbox" id="mrCheck"> 
<br></br> 

<button onclick="myFunction()">Try it</button> 

<p id="cats"></p> 

<script> 

function myFunction() { 
    var soda = document.getElementById("sodaCheck").checked; 

    if (soda) { 
     catBehavior = "Cats are being rascals."; 
    } else { 
     catBehavior = "Cats are behaving nicely."; 
    }  

    document.getElementById("cats").innerHTML = catBehavior; 
} 

</script>

をなぜ第二の例の仕事ではなく、最初の1していますか？

出典

2017-11-18 pizza_pal

あなたのコードは多少の誤差があります0に初期化し、初期myCats定義の後にそれらを使用することはありませんので、

var soda = 0, mr = 0, sophie = 0;

はバント。修正を確認してください：

<br>タグは自己閉鎖されています。
ソーダ、mr、ソフィーは文字列でなければなりません。
getElementByIdはdocumentオブジェクト（または他のDOMノード）に属します。

<h3>What cats are in the room?</h3> 
 

 
Sophie: <input type="checkbox" id="sophieCheck"> 
 
<br> 
 
Soda: <input type="checkbox" id="sodaCheck"> 
 
<br> 
 
Mr.: <input type="checkbox" id="mrCheck"> 
 
<br> 
 

 
<button onclick="catsInTheRoom()">Try it</button> 
 
<br> 
 

 
<p id="cats"></p> 
 
<script> 
 
function catsInTheRoom() { 
 

 
var myCats = [ 'soda', 'mr', 'sophie' ]; 
 

 
if (document.getElementById("sodaCheck").checked) { 
 
myCats[0] = 1; 
 
} else { 
 
myCats[0] = 0; 
 
} 
 
if (document.getElementById("sophieCheck").checked) { 
 
myCats[2] = 10; 
 
} else { 
 
myCats[2] = 0; 
 
} 
 
if (document.getElementById("mrCheck").checked) { 
 
myCats[1] = 20; 
 
} else { 
 
myCats[1] = 0; 
 
} 
 

 
document.getElementById("cats").innerHTML = myCats[0] + myCats[1] + myCats[2]; 
 
} 
 
</script>

出典

2017-11-18 01:08:44

スクリプトエラー：soda、mr、sophieは変数として使用されますが、以前は定義されていません。エラーをスローして関数の実行を停止します。

var myCats = [ 0, 0, 0 ]; // will initialize myCats to 0,0,0

またはあなたが最初の変数を定義したことができます：あなたがすべき十分な

出典

2017-11-18 00:45:49 danchik

ライン 'VARのmyCatsの= [ソーダ、MR、ソフィー];'エラーの原因です。文字列を変数として使用しています。これらの文字列を使用する必要がある場合は、それらのプロパティを持つオブジェクトを作成し、次のように値を初期化します。

var myCats ={soda=0, mr=0, sophie=0}; 
if (getElementById("sodaCheck").checked) { 
    myCats.soda = 1; 
} else { 
    myCats.soda = 0; 
} 
if (getElementById("sophieCheck").checked) { 
    myCats.sophie= 10; 
} else { 
    myCats.sophie = 0; 
} 
if (getElementById("mrCheck").checked) { 
    myCats.mr = 20; 
} else { 
    myCats.mr = 0; 
} 

getElementById("cats").innerHTML = myCats.soda + myCats.mr + myCats.sophie; 
}

出典

2017-11-18 01:15:05

Javascript：ボタンonclickイベントで関数が定義されていませんか？

答えて

関連する問題