html5とjavascriptで条件分岐する処理を実行したい

前提・実現したいこと

趣味のテキストサイトを書いた事があるレベルのプログラミング初心者です。
非常に初歩的かと思いますが、分からなくなってしまったので教えてください。

html5にjavascriptを組み込んで
①テキストボックスに数字を入力させる
②ラジオボタンで二つの要素（Y/N)のどちらかを選ばせる
③実行ボタンを押させる
④Yesの場合はテキストボックスに入力させたのと同じ数字を表示する
Noの場合は1-100までのランダムな数字を表示する

というものを作ろうとしています。

発生している問題・エラーメッセージ

③までは表示が出来ています。
実行ボタンを押しても実行されません。問題はjavascript部分かと思います。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>バージョン0.0.1</title>
6</head>
7<body>
8<big><b>AをBがマネするか</big></b>
9 <p>Aの値</p>
10   <form name="form1" id="id_form1" action="">
11    <input name="textBox1" id="id_textBox1" type="text" value="" />
12    
13  </form>
14<p>AをBがマネするか<p>
15<input type="radio" id="yesno" name="yesno" value="yes">〇
16<input type="radio" id="yesno" name="yesno" value="no">×
17
18<p>Bの値を表示する</p>
19<input type="button" value="実行" onclick="onButtonClick();" />
20<script type="text/javascript">
21if( "yesno" == "yes" ) 
22function getValue(id_form1){
23  var result = document.getElementById(id_form1).value;
24 document.getElementById("bvalue").innerHTML = " + result + ";
25 document.write( " + result + " )
26if( "yesno" = "no" )
27 function GetRandomNumber() {
28   var randnum = Math.floor( Math.random() * 100 );
29   document.getElementById("bvalue").innerHTML = random;
30document.open();
31document.write(  " + random + " )
32document.close();
33}
34
35</script>
36<p>
37  <span id="bvalue"></span>
38</p>
39</body>
40</html>

試したこと

特にありません。
色々な初学者向けサイトの切り貼りで作ったので、
・どこかで変数の名前の指定が間違っているのでは？
・実行ボタンとif処理がリンクしていないのでは？
と考えています。

補足情報（FW/ツールのバージョンなど）

・javascriptの文法が間違っている可能性がありますが、間違っているポイントが分からないので間違っている行・勘違いしている文法規則がありそうなら指摘していただけると幸いです。
・もっと簡略に書ける＆このような処理を作る上で知っておくべき事があるようでしたらそちらも教えていただけると嬉しいです。
・完全な初学者なので本来ならサンプルコードの練習を数多くするべきなのでしょうが、期限が短いので頼らせて頂きます。力をお貸しくださると嬉しいです。
・最終的にはmonaca上でonsenUIのタグに書き換える予定です

kyoya0819

2019/07/23 16:08

2点 1,bigタグは使用不可 2,document writeにセミコロンがない

kyoya0819

2019/07/23 17:20 編集

あと加えて4点 3,ID同じの使えない 4,Math.floor( Math.random() * 100 );って0から99までの乱数を生成してる 5,if( "yesno" == "yes" ) function getValue(id_form1){の「}」がない 6,onButtonClick()どこに書いてある？

m.ts10806

2019/07/24 00:36

これはどうみても質問ではなく作業依頼（非推奨）なのでお金を払って業者（クラウドワークスなど）にやってもらってください。他人にコピペコードをもらったところで余計に自身の手におえなくなるだけです。期限がどうとか赤の他人には関係ありません。そのようなものを無料の質問サイトで済ませてしまおうという魂胆が見えると、まともに取り合おうという人はいなくなります。

退会済みユーザー

2019/07/24 10:20

作業依頼はやめましょう。

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

回答4件

おかしいちょいちょいあるのでデバッグコンソール見てエラー表示される個所直してみたら？
切り貼りやめた方が変な書き方しないだろうし結果的に早く完成するんじゃない？

期限が短い

なんの期限か分からないけど期限があるようなきちっとしたものなら尚更デバッグコンソール見て対応した方が良い

投稿2019/07/23 14:44

編集2019/07/23 14:46

hentaiman

総合スコア6415

heartshaker

2019/07/23 15:02

それではデバッグコンソールを見た結果をここに質問で答えて頂けるでしょうか。 Uncaught SyntaxError: Unexpected end of input　が　</script>に出ているのですが、どうしたら解決するのでしょうか。（if( "yesno" = "no" )の部分は書き直しました）

hentaiman

2019/07/23 15:09

なぜそんな言い方になる？それにデバッグコンソール見ろとは書いたが直してやるから書けとは書いてない。それはともかく、どういうエラーが出ていたのか、どういう原因だと思ってどう対処したのか、その結果どうなった（期待する結果とどう違ったが）を書いた方が良いついでに期限だなんてQAにまるで関係の無い自分都合を書いたら回答できる人も回答してくれなくなると思うので消した方が良い。丸投げ質問でも答えてくれる可能性は上がる書き直しましただけでは何をどうしたのか分からない

heartshaker

2019/07/23 15:29

「どこが間違っているのか詳しくお願いします」に「まちがいがちょいちょいある」との返答を頂きましたので、書けば本来の質問で求めている「間違っているポイントが分からないので間違っている行・勘違いしている文法規則がありそうなら指摘していただけると幸いです」をして頂けるのではと思ったのですが。きちんと学ばれている方から見れば勉強不足を指摘したくもなりましょうが、その部分については指摘が不要である旨を書いております。どういうエラーが、と言われましても上記のコメントとおりのエラーが出ています。エラーが出ない事が期待する結果です。期限については回答期限ではなく自分に関しての部分ですし、特に課題のようなteratailのルールに抵触するものではありませんので回答者様方には関係ありません、特に消す必要はないかと思われます。私はコード部分に関する改善点を求めており、質問文についての改善点は求めておりません。書き直した部分は＝を一つ増やしました。それでエラーが消えています。ええと、何をどうしたのかわからないという事はどこが間違っているのかが分かっていて回答してくださった訳ではないのですね？申し訳ないですが、喧嘩腰の回答を求めている訳ではありませんし、初歩的な間違いの詳細を指摘してくださるお人よしな方に回答をお願いしている事は読んでいただけたらお分かりと思いますので、今後の解答はご遠慮ください。修正部分の更新内容・意図の追記についてはコミュニティの暗黙の了解である旨を別ページで読みましたので、追記しておきます。

hentaiman

2019/07/23 15:37

>それはともかく、どういうエラーが出ていたのか、どういう原因だと思ってどう対処したのか、その結 >果どうなった（期待する結果とどう違ったが）を書いた方が良いこれ、読みました？飽くまでこれに対して回答するつもりですよ、QAサイトなんで。期限が設けられている＝学習ではない。学習ではないものをまるで理解無く対応する状態になるのは良くない。とまあ普通の判断をしただけです。ついでにいうと喧嘩腰なのはあなたです。こちらはただ回答しただけ、それに対してなぜか条件付きでこうしたら回答するのか？と言ってきたのはあなたです。「どこが間違っているのかが分かっていて回答してくださった訳ではないのですね？」という一言も、喧嘩腰の気がなければ書く必要のない極めて無駄なコメントですしね。 > 今後の解答はご遠慮ください。そちらこそ今後私の回答に対してのコメントはご遠慮ください。ですが自分が言って終わりたいタイプならどうぞ好きなだけコメントどうぞ。

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

試してみたところ、Unexpected end of inputのエラーが出ました。
なので、「Unexpected end of input」でググってみたところ、一番上に↓このページが出ました。

閉じる「});」がなくないですか

JavaScript - 【Javascript】Unexpected end of inputというエラーが出ます｜teratail

改めてご提示のコードを見ると、かっこの対応があっていないようです。

……と、このように、ググれば8割方の問題は解決します。
どうぞお試しください。

投稿2019/07/24 00:30

Lhankor_Mhy

総合スコア36074

idの名前や色々変更してつくってみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>バージョン0.0.1</title>
6</head>
7<body>
8<big><b>AをBがマネするか</big></b>
9 <p>Aの値</p>
10   <form name="form1" id="id_form1" action="">
11    <input name="textBox1" id="id_textBox1" type="text" value="" />
12
13  </form>
14<p>AをBがマネするか<p>
15<input type="radio" id="yes" name="yesno" value="yes">〇
16<input type="radio" id="no" name="yesno" value="no">×
17
18<p>Bの値を表示する</p>
19<input type="button" value="実行" onclick="onButtonClick();" />
20<script type="text/javascript">
21    function onButtonClick(){
22        var yes = document.getElementById("yes");
23        var no = document.getElementById("no");
24        if (yes.checked){
25            var result = document.forms.id_form1.id_textBox1.value;
26            document.write(result);
27        }else{
28            var random = Math.floor(Math.random() * 101);
29            document.write(random);
30        }
31    }
32</script>
33<p>
34  <span id="bvalue"></span>
35</p>
36</body>
37</html>

あなたのコードの

html
1<input type="radio" id="yesno" name="yesno" value="yes">〇
2<input type="radio" id="yesno" name="yesno" value="no">×

のところですが
idは1このタグに対してしか使えません。
複数使うのはclassを使うといいでしょう。

もう一個

html
1<input type="button" value="実行" onclick="onButtonClick();" />

の onclickのところには関数名を入れます。
なのでscriptの中でonButtonClickを定義しないといけません。

投稿2019/07/23 22:51

編集2019/07/24 00:07

退会済みユーザー

総合スコア0

kyoya0819

2019/07/23 23:23

おそらく質問者さんのコードをそのまま改変したのだと思いますが一点。 bigタグはHTML5では廃止されたタグです。そのため宣言文をHTML4系にした方が良いかと

退会済みユーザー

2019/07/24 00:05 編集

そうですね。ありがとうございます。でもこのぐらいのものだったら動けばいいのかと思いまして。動作確認済みなので多分大丈夫だと思います。

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

作ってみた
https://s.codepen.io/asuchi0819/debug/qebvgd

HTML
1<form>
2  <input type="text" id="hoge2" /><br>
3  yes:<input type="radio" name="hoge4" value="yes">;
4  no:<input type="radio" name="hoge4" value="no">;<br>
5  <input type="button" value="実行" onclick="hoge0()" />
6  <p id="hoge8"></p>
7</form>

JavaScript
1function hoge0(){
2  var hoge1 = document.getElementById('hoge2').value;
3  var hoge3 = document.getElementsByName('hoge4');
4  for(var hoge5=0; hoge5<hoge3.length; hoge5++){
5    if (hoge3[hoge5].checked) {
6      var hoge6 = hoge3[hoge5].value;
7      break;
8    }
9  }
10  if (hoge6 == 'yes') {
11    document.getElementById('hoge8').innerHTML=hoge1;
12  } else if (hoge6 == 'no') {
13    var hoge7 = Math.floor( Math.random() * 100 );
14    //こっちの方が正しいんじゃね？//
15    //var hoge7 = Math.floor( Math.random() * ( 101 - 1 ) + 1 );//
16    document.getElementById('hoge8').innerHTML=hoge7;
17  }
18}