javascriptを使ってでクイズを作りたいのですが…

###前提・実現したいこと
全くの初心者です。
HTML、javascripを使って、４択クイズを作ろうとしています。
radiobuttonで４択にして、答えのボタンをクリックすると、alertで「正解」と出るようにしたいです。

###発生している問題・エラーメッセージ
答えを選択してクリックしても、alertが出て来ません。

エラーメッセージ
ReferenceError: sayhello is not defined
と出ています。

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

HTMLはこんな感じで、

<html> <head> <meta charset="utf-8"> <title>大崎クイズ</title> <script src="大崎クイズ.js"></script> </head>

<header>
<h1>大崎クイズ</h1>

</header> <section class="information"> <h2>問題１</h2> </section> <body> <p>大崎駅にあるオブジェはなーに？</p> <p> <form name="radddio"> <label class="radio-inline"> <input type="radio" name="q1" id="q1-1" value="1">おじさん </label> <label class="radio-inline"> <input type="radio" name="q1" id="q1-2" value="2">おばさん </label> <label class="radio-inline"> <input type="radio" name="q1" id="q1-3" value="3">はなさん </label> <label class="radio-inline"> <input type="radio" name="q1" id="q1-4" value="4">ゆうたさん </label> </p> <p> <input type="button" value="答え" onclick="sayhello();">

                <id="who"></p>

javascriptは、こんな感じです。

function sayhello(); {
if (document.radddio.value='2'); {
alert('正解！全長１２メートルの赤い帽子をかぶったおじさんだよ！')
} else (document.radddio.value='1''3''4');{
alert('違うよ');
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/07/15 02:15

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答5件

HTMLについて

doctype宣言をしましょう。
xmlns属性は不要です。
header要素、section要素はbody要素の内容として記述しましょう。
form要素(name="radddio")の開始タグに対応する終了タグがありません。
p要素はform要素を子要素として持つことはできません。div要素などで置き換えましょう。
id要素は存在しません。存在する要素で代用するか、不要ならば削除しましょう。
a要素のherf属性はhref属性が正しいと思います。

javascriptについて

セミコロンが必要ではないところにあるので、取り除く。
querySelectorメソッドを使って選択されているラジオボタンを特定しています。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>大崎クイズ</title>
6</head>
7<body>
8<header>
9    <h1>大崎クイズ</h1>
10</header>
11<section class="information">
12    <h2>問題１</h2>
13</section>
14<p>大崎駅にあるオブジェはなーに？</p>
15<div>
16    <form name="radddio">
17        <label class="radio-inline">
18            <input type="radio" name="q1" id="q1-1" value="1">おじさん
19        </label>
20        <label class="radio-inline">
21            <input type="radio" name="q1" id="q1-2" value="2">おばさん
22        </label>
23        <label class="radio-inline">
24            <input type="radio" name="q1" id="q1-3" value="3">はなさん
25        </label>
26        <label class="radio-inline">
27            <input type="radio" name="q1" id="q1-4" value="4">ゆうたさん
28        </label>
29    </form>
30
31    <p>
32        <input type="button" value="答え" onclick="sayhello();">
33    </p>
34
35    <p>
36        <a href="問２.html" title="問２へ">次の問題</a>
37    </p>
38    <p>
39        <button type="submit"> 次へ</button>
40    </p>
41</div>
42<script>
43    function sayhello() {
44        if (document.querySelector("input[name='q1']:checked").value === "2") {
45            alert("正解！全長１２メートルの赤い帽子をかぶったおじさんだよ！");
46        } else {
47            alert("違うよ");
48        }
49    }
50</script>
51</body>
52</html>

投稿2017/07/14 19:18

s8_chu

総合スコア14731

セミコロンなど、かなり間違えているので、気を付けて書いてみてください。

JavaScript
1function sayhello() {
2  if (document.forms['radddio'].elements['q1'].value === '2') {
3    alert('正解！全長１２メートルの赤い帽子をかぶったおじさんだよ！');
4  } else {
5    alert('違うよ');
6  }
7}

投稿2017/07/14 08:51

x_x

総合スコア13749

nattou_ume_nasu

2017/07/14 09:58

回答ありがとうございます。セミコロンには、どんな意味があるのでしょうか？

x_x

2017/07/14 14:50

文末ですね。何か参考にしているのがあればよく読んでみましょう。

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

納豆うめえなっす（水戸出身）

それはそれとして、jsファイルが読み込まれていない、というのが一番考えられる原因でしょう。そのURLを直接入力した時に、jsファイルは見えますか？

追記

ああ、違う。

javascript
1function sayhello(); {  //このセミコロンがいらない
2if (document.radddio.value='2'); {  //このセミコロンがいらない
3alert('正解！全長１２メートルの赤い帽子をかぶったおじさんだよ！')
4} else (document.radddio.value='1''3''4');{    //elseの後に条件はいらない セミコロンもいらない
5alert('違うよ');
6} 
7

投稿2017/07/14 08:25

編集2017/07/14 08:31

Lhankor_Mhy

総合スコア36074

nattou_ume_nasu

2017/07/14 08:36

回答ありがとうございます！ javascript書き直したんですけど、うまくいきません。。。

Lhankor_Mhy

2017/07/14 08:42

当初のエラーは消えましたか？

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

多分jsががっつり構文エラーで関数の定義ができてません
formの入力値の取得にも問題ありっぽいですが
とりあえずエラーメッセージに対する対処はjs構文エラーと思います

js
1function sayhello(){
2  if (document.radddio.value=='2'){
3    alert('正解！全長１２メートルの赤い帽子をかぶったおじさんだよ！')
4  } else if ('134'.indexOf(document.radddio.value)>-1){
5    alert('違うよ');
6  }
7  else{
8    alert('入力値が不正っていうか取得できてないし');
9  }
10}