こんにちは、javascriptで簡単な問題を作って解こうとしています。
今回わからないところは、初歩的ですがどのサイトを見ても書き方が

if(条件式){
実行内容または処理
}else{
実行内容または処理
}

という書き方です。実行してもエラーで『〜定義されていません』とでますが、そもそも条件式に入れる書き方や実行内容や処理てどういう書き方なの？や、引数の使い方は？return式？？てとこにつまづいています。
申し訳ないですが、ソースコードの書き方を詳しく教えてもらえればと思います。もしくは例になるサイトとかありましたらよろしくお願いします！

今回、条件分岐のif文を使っての問題ですが

Q.日本で最も高い山はどこでしょう？

1.答え富士山 ←クリック
2.答え高尾山 ←クリック

答え合わせ：『正解』あるいは『不正解』←この部分が条件によって変化し表示される

二択の問題を自分で作り答えのどれかがクリックされたら『正解』『不正解』を表示する

というような問題です。

html


<body>
     <ul>
  	   <p>Q.日本で最も高い山はどこでしょう？</p>
   
	   <li id="test1">1. 富士山  ＜--クリック</li>
	   <li id="test2">2. 高尾山  ＜--クリック</li>
    </ul>
   
  	   
	   <p id="test3">＜--文字が出る</p>
	   <p id="test4">＜--文字が出る</p>
   
</body>

jsでは

var test1 = document.getElementById("test1");
    test2 = document.getElementById("test2");
    test3 = document.getElementById("test3");
    test4 = document.getElementById("test4");
 

   function ans(富士山){
test1.addEventListener("click", function(){
    if (ans="富士山"){
          test3.innerHTML = "正解";
}else{
          test3.innerHTML = "不正解";
    } 
  }
};

coco_bauer

2017/06/15 02:59

「エラーで『〜定義されていません』」と表示されるJavascriptのソースコードは、どれですか？そして、何が定義されていないというメッセージが表示されるのですか？

行動規範の内容に同意します

回答3件

結構めちゃくちゃな感じなので1つ1つ整理していきましょう。
（JavascriptとしてというよりHTML自体、プログラムとしての基本的な組み方も）

提示のコードだと別のエラーが出ます。)が1つ足りません。

エラー：Uncaught SyntaxError: missing ) after argument list

HTMLの構造がおかしいところがある<ul>の中に<P>？外に出すか<li>に入れましょう
var がついてたりついてなかったりは統一する。
function ans()は自分で定義した関数だがどこからも呼び出されていないため実行はされない

強いてならクリック時のイベントでしょうか。

HTML
1<li id="test1" onclick="ans('富士山');">1. 富士山  ＜--クリック</li>
2<li id="test2" onclick="ans('高尾山');">2. 高尾山  ＜--クリック</li>

Javascript
1function ans(select){
2}

liにクリックを置くのが良いのかは別としてこれで任意の変数selectにはクリックした方の情報が入ります。
これを利用するとtest1.addEventListener("click", function(){が不要となりますね。

引数に「富士山」のように渡されることはない。呼び出し元から情報を受け取るので任意の変数にしましょう。
if文で比較していない。if (ans ="富士山"){だと変数ansに[富士山]という文字列を代入しているだけとなり、どんな値を渡しても「富士山」となります。比較演算子を学びましょう。参考：比較演算子

条件式に書く内容は状況によりますが、主に比較演算子を使った結果がtrue（正しい）という内容を書くものです。

今回で言うと、クリックした回答は、実際の答えと正しいのか？という意味ですね。

簡潔に書くと、Javascript部分はこれだけで良いはずです。
※もちろんaddEventListenerを使うやり方もありますが。

Javascript
1function ans(select){
2  if(select=="富士山"){
3　  test3.innerHTML = "正解";
4  }else{
5    test3.innerHTML = "不正解";
6  }
7}
8

追記（return）

質問にある「return」についてですが、日本語にしてもそのままの通り「戻す」意味があります。
function()で色々と処理をした結果を受け取って、function()を読んだ先で処理をする必要があるときなどに利用します。
今回に無理やり組み込むとこんな感じでしょうか。

Javascript
1function ans(select){
2  var answer = "";
3  if(select=="富士山"){
4    answer = answerText(true); 
5  }else{
6    answer = answerText(false); 
7  }
8  test3.innerHTML = answer;
9}
10
11//正否によって表示する文言を返す
12function answerText(ans){
13  if(ans){  // ans == true の省略  余談：!ans とすると ans == falseの省略となります
14    return "正解";
15  }else{
16    return "不正解";
17}
18

参考：戻り値で関数から値を返す(return文)

あくまで今回は例示であり全てではありません。様々な使い方ができるので状況にあわせて適宜使えるようにしていってくださいね。

投稿2017/06/15 03:15

編集2017/06/15 03:35

m.ts10806

総合スコア80850

ginowan589

2017/06/15 03:55

ご回答ありがとうございます。詳しい説明ある程度理解できました。エラーの意味もなんとなくしか理解できずそこもしっかり理解できるようにしないといけないことがわかりました。

m.ts10806

2017/06/15 04:14 編集

エラーも英語ではありますがGoogle翻訳に突っ込めばいい感じに訳してくれますし、そのプログラムコード特有な自分で定義した変数とか関数、ファイル名以外は既存のエラーメッセージです。検索すればエラーの意味と解決につながるヒントは幾らでも出てきます。また、いきなり色々やろうとするのではなくやりたいことを分解して1つずつ成果を確認しながらいくと良いですよ。今回は「クリックした回答が正解か不正解の判断をして結果を表示する」ですが、分解すると、結構あります。・クリックしたときに起こしたいクリックイベントは起きているか　※クリックしたときに呼び出したい関数は呼び出せているか・呼び出した関数に渡したい情報は渡っているか・ifで正否の判断が思ったとおりにできるか・正解、不正解は正しく書き換えられるかどれも個別に動かそうと思えば動かせるので、やりたいことを分解して１つ１つおさえて出来上がったものを部品として、最終的に目的を達成するための「プログラムコード」を完成させる癖をつけると良いです。そうすることで完成品のプログラムコードの説明を求められたときにきちんと1つ1つ説明できるようになっているはずです。がんばってください。

ginowan589

2017/06/15 04:11

ありがとうございます。英語のエラーについては翻訳を使うようになりました。確かに今まではやりたいことを分解せず多くのことをやったせいでエラーがおかしく直らなかったのかもしれないですね。分解して一つずつ結果をだしていけば順序も理解できるとおもいます。

m.ts10806

2017/06/15 04:20

まあ、一気に多くのことをやるとつまづいたときにどこでつまづいたのか分からなくなって原因究明に浪費しまくってしまいますからね。単体で確認して、一気に合体ではなく１つ１つ合体させていくと問題の出所もはっきりして解決までがスムーズに行けるようになります。

ginowan589

2017/06/15 04:30

恥ずかしながら、前回エラー起きた時は、３日間手が止まってしまってエラーが解けたのが文字の全角、半角文字が問題でした...それと全角スペース半角スペース違いと情けなく1時間とかではなく3日間もつまづくとはあの時は黒い画面見るのが怖かったですね。

m.ts10806

2017/06/15 04:37

最初のころはよくある話です。環境を整えるだけで1日かかったり、何のことのないエラーに延々と頭を悩ませたり。「エラーは検索すれば大体意味が分かる」ということが分かれば怖さは半減以下になるでしょうし、やりたいことがあって途中まではとりあえず進んでるようだけどどうも分からないことがあるような場合は今回のように質問すると良いですね。

ginowan589

2017/06/15 04:43

詳しい説明本当にありがとうございました。

行動規範の内容に同意します

ベストアンサー

質問者さんの提示を最大限いかしてもこんな感じでしょうか？

javascript
1<script>
2document.addEventListener("click", function(e){
3  var test1,test2,test3,test4;
4  test1 = document.getElementById("test1");
5  test2 = document.getElementById("test2");
6  test3 = document.getElementById("test3");
7  test4 = document.getElementById("test4");
8  var t=e.target;
9  if(t==test1){
10    test3.innerHTML = "正解";
11  }else if(t==test2){
12    test3.innerHTML = "不正解";
13  } 
14});
15</script>
16<p>Q.日本で最も高い山はどこでしょう？</p>
17<ul>
18<li id="test1">1. 富士山  ＜--クリック</li>
19<li id="test2">2. 高尾山  ＜--クリック</li>
20</ul>
21<p id="test3">＜--文字が出る</p>
22<p id="test4">＜--文字が出る</p>
23
24

投稿2017/06/15 03:11

yambejp

総合スコア114779

ginowan589

2017/06/15 04:13

ご回答ありがとうございます。ヒントもらえました！！別のやりかたですができるようになりました。

行動規範の内容に同意します

質問者さんが望む回答ではないかも知れませんが・・・

ご質問の雰囲気からJavascriptの基本的な文法をこれから学ぶという状況のようです。だとすればいったんHTMLから離れて純粋なJavascriptの言語のみを学ぶという進め方もあると思います。

HTMLの中でDOMをアクセスするのはJavascriptの基本文法とDOMの構造や操作方法(メソッドやそれをアクセスするためのjqeuryなどのライブラリーの使い方)を理解した上で初めて書けます。そういう意味ではご質問に書かれているような問題は「簡単な問題」とはいえないかも知れません。

たとえばブラウザー上で動かさなくてもnodejsをインストールして

javascript
1// test.js
2var a = 1;
3var b = 2;
4if (a == b) {
5  console.log("equal");
6} else {
7  console.log("not equal");
8}
9var ar = [1,2,3];
10for (i in ar) {
11  console.log(ar[i]);
12}

bash
1$ node test.js
2not equal
31
42
53

といったあたりからやると、コードも短く、すぐに動かすことができるので、色々な書き方を学ぶのに都合がよいと思います。
言語を学ぶなら文法の初歩的な解説記事や初心者用の教科書を使うといいのではないでしょうか？

投稿2017/06/15 03:06

KSwordOfHaste

総合スコア18394

ginowan589

2017/06/15 03:35

ご回答ありがとうございます。 javascriptに関しての０から変数や関数とはなにかからも一度復習しようと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

javascript if文の書き方について

追記（return）

関連した質問