textとラジオに入力した文字を足したい

テキストに数字をいれ、それをラジオで選択した数値と足して
どちらかが大きかった場合にそれ相応のアラートを出したいのですが
テキストの数値だけで判断されてラジオの数値を足してくれません。
下手にいじると今度は関数を認識してくれないということもあります。
これだと一番下のアラートとボタンのところにエラーがでます。
まったくわからないのでアドバイスをください。
始めて１ヶ月足らずです。

function sougou(){
   var saba1=document.keisei.saba.value;
   var maguro1=document.keisei.maguro.value;
   var f=document.kei.kom;
   var aaa='';
   
    for(var i = 0; i < f.length; i++ ){
    if(f[i].checked){          
        aaa=f[i].value;
        return aaa;}  //ここの数値がどこかにいってしまう
 
  if((saba1==0||maguro1==0)){
      alert("数字を入れる");
      }else if(saba1>maguro1+aaa){
      alert("あっちの勝ち");
      }else if(saba1<maguro1+aaa){
       alert("こっちの勝ち");}}  //ここでエラーが出る

<form name="kei">
<p>
<input type="radio"name="kom"value="5">5位<br>
<input type="radio"name="kom"value="6"checked>6位<br>
<input type="radio"name="kom"value="7">7位<br>
</p>
    
<p>
赤：<input type="text"name="saba"><br>
青：<input type="text"name="maguro">
<p>
    
<input type="button" value="計算する"onClick="sougou()">
<!--起動させたらエラーが起こる--!>
</p>
</form>

kei344

2016/07/25 15:32

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

toutou

2016/07/25 15:52

一応入れてみましたがコードブロックと言うのを始めて聞いたのでこれであってるかはわかりません。

kei344

2016/07/25 15:57 編集

```（バッククオート3つ）です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、質問文の編集ページでコードを選択し、編集ページにある「 B I A 」などのボタンのならびにある「</>」のボタンを押すことでもコードブロック化できます。

toutou

2016/07/25 16:15

時間をもらいましたがなんとかできました

kei344

2016/07/25 16:17

<html> など現在コードブロック外の要素は削除しても良いと思います。

toutou

2016/07/25 16:23

ほかは全部削除しました

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

回答2件

ベストアンサー

まず、インデントをしっかり付けましょう。コード用のエディタなどぐぐればたくさんあるのでそれを使うと良いです。

JavaScript
1function sougou(){
2   var saba1=document.keisei.saba.value;	// ← keiseiなのかkeiなのか統一する
3   var maguro1=document.keisei.maguro.value;	// ← keiseiなのかkeiなのか統一する
4   var f=document.kei.kom;			// ← keiseiなのかkeiなのか統一する
5   var aaa='';
6
7    for(var i = 0; i < f.length; i++ ){
8    if(f[i].checked){          
9        aaa=f[i].value;
10        return aaa;}  //ここの数値がどこかにいってしまう	// ← returnするとfunctionを抜けます
11		// ← forの閉じ括弧「}」が無い
12  if((saba1==0||maguro1==0)){	// ← 0も数字です。
13      alert("数字を入れる");
14      }else if(saba1>maguro1+aaa){
15      alert("あっちの勝ち");
16      }else if(saba1<maguro1+aaa){
17       alert("こっちの勝ち");}}  //ここでエラーが出る

HTML
1<form name="kei">		<!-- ← keiseiなのかkeiなのか -->
2<p>
3<input type="radio"name="kom"value="5">5位<br>		<!-- ← 全ての属性値の間にスペースがあるほうがいいと思う -->
4<input type="radio"name="kom"value="6"checked>6位<br>
5<input type="radio"name="kom"value="7">7位<br>
6</p>
7
8<p>
9赤：<input type="text"name="saba"><br>
10青：<input type="text"name="maguro">
11<p>		<!-- ← ここは </p> でしょう -->
12
13<input type="button" value="計算する"onClick="sougou()">
14<!--起動させたらエラーが起こる--!>		<!-- ← コメントの書き方が間違っています -->
15</p>		<!-- ← 不要 -->
16</form>

とりあえず整形したものをリンクしておきます。
動くサンプル：https://jsfiddle.net/j8vv44es/

追記：

数値の問題を是正したバージョンも貼っておきます。

動くサンプル2：https://jsfiddle.net/j8vv44es/1/

投稿2016/07/25 16:55

編集2016/07/25 17:09

kei344

総合スコア69400

toutou

2016/07/25 17:23

ご丁寧に何個もありがとうございます。こうしてみるとひどいですね。何からやっていいやらわからなくなるくらいひどいです。もう少し基礎をこつこつやっていこうかなと思います。

kei344

2016/07/25 19:43 編集

いえいえ、文法上のミスはよくあることなので大丈夫です。コード用のエディタには文法チェック機能が付いているものや、入力を補助してくれるものもあるので、そういうものでカバー出来ます。また、エラーを探すことについても、各モダンブラウザに標準でついている「デベロッパーツール」を使うことで、発見や対処がしやすくなります。【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 http://www.buildinsider.net/web/chromedevtools/01 【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】 http://gihyo.jp/dev/feature/01/devtools/0001?page=2 がんばってくださいねー。

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

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<title>Document</title>
6	<script type="text/javascript">
7	function sougou(){
8    var saba1=document.kei.saba.value;
9    var maguro1=document.kei.maguro.value;
10    var f=document.kei.kom;
11    var aaa='';
12
13    for(var i = 0; i < f.length; i++ ){
14      if(f[i].checked){
15        aaa=f[i].value;
16        return aaa.to_i;
17      }  //ここの数値がどこかにいってしまう
18
19      if((saba1==0||maguro1==0)){
20        alert("数字を入れる");
21      }else if(saba1>maguro1+aaa){
22        alert("あっちの勝ち");
23      }else if(saba1<maguro1+aaa){
24        alert("こっちの勝ち");
25      }
26    }  //ここでエラーが出る
27  }
28</script>
29</head>
30<body>
31	<form name="kei">
32<p>
33<input type="radio"name="kom"value="5">5位<br>
34<input type="radio"name="kom"value="6"checked>6位<br>
35<input type="radio"name="kom"value="7">7位<br>
36</p>
37
38<p>
39赤：<input type="text"name="saba"><br>
40青：<input type="text"name="maguro">
41<p>
42
43<input type="button" value="計算する"onClick="sougou()">
44</p>
45</form>
46</body>
47</html>

こんな感じでしょうか？

問題点としては、まずsaba1・saba2の取得のところで

document.keisei.saba.value

となっていましたが、フォームの名前がkeiなので

document.kei.saba.value

だと思います。（同じようにmaguroも）

もう一つはaaaとmaguro・sabaの型の違いです
型はプログラミングをやっていたら一度は聞いたことがあると思いますが、変数の入っているものの種類を表します。
例えばaaaは文字列を入れるstring型で、saba・maguroは整数を入れるinteger型です。
基本的に型が違う物の計算はできません。なのでaaaには入っている数字は無視されたのでしょう。
そこで下のように、aaaをto_iというstring型をinteger型に変換するメソッドをつかって変換することによって計算できるようにしています。