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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

4401閲覧

html チェックボックスのチェックされた合計を表示させる

kokok

総合スコア145

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

2クリップ

投稿2019/05/18 16:57

html

1コード 2 3<!DOCTYPE html> 4<HTML> 5<HEAD> 6<meta charset="utf-8"> 7<SCRIPT > 8 9function calc_total(){ 10 kingaku = 0; 11 for (i=0; i<document.myform.length-1; i++){ 12 if (document.myform.elements[i].checked){ 13 kingaku += eval(document.myform.elements[i].value); 14 } 15 } 16 document.myform.goukei.value = kingaku + "円"; 17} 18 19</SCRIPT> 20</HEAD> 21<BODY> 22 <form name="myform"> 23 <table border=1 > 24 <tr><td> 25 <input type="checkbox" value="500" onClick="calc_total()"> 26 ラーメン(500円)</td></tr> 27 <tr><td> 28 <input type="checkbox" value="600" onClick="calc_total()"> 29 チャーハン(600円)</td></tr> 30 <tr><td> 31 <input type="checkbox" value="600" onClick="calc_total()"> 32 酢豚(600円)</td></tr> 33 <tr><td> 34 <input type="checkbox" value="800" onClick="calc_total()"> 35 A定食(800円)</td></tr> 36 <tr><td> 37 <input type="checkbox" value="900" onClick="calc_total()"> 38 B定食(900円)</td></tr> 39 <tr><td> 40 合計金額: 41 <input type="text" name="goukei"> 42 </td></tr> 43 </table> 44 </form> 45</BODY> 46</HTML>

javascriptの

function calc_total(){
kingaku = 0;
for (i=0; i<document.myform.length-1; i++){
if (document.myform.elements[i].checked){


i<document.myform.length-1;
このコードのi と比較している length-1 とは myform が配列みたいになっているということでしょうか?

myform.elements[i] のコードの意味も教えてください

Yuki__Watanabe👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

document.myform配列ではなくHTMLElementです。
どちらもlengthで何個あるか数えることができます。

違いを確認するには配列かどうかはArray.isArray(document.myform)
HTMLElementかどうかはdocument.myform instanceof HTMLElement
判定可能なのでこちらで判定すると良いでしょう。

余談ですがevalは使ってはいけません。
JavaScriptでeval関数の使い方とリスクとは【初心者向け】

html

1<form name="myform"> 2 <table> 3 <tr> 4 <td> 5 <input type="checkbox" value="500" onClick="calc_total()" /> 6 ラーメン(500円) 7 </td> 8 </tr> 9 <tr> 10 <td> 11 <input type="checkbox" value="600" onClick="calc_total()" /> 12 チャーハン(600円) 13 </td> 14 </tr> 15 <tr> 16 <td> 17 <input type="checkbox" value="600" onClick="calc_total()" /> 18 酢豚(600円) 19 </td> 20 </tr> 21 <tr> 22 <td> 23 <input type="checkbox" value="800" onClick="calc_total()" /> 24 A定食(800円) 25 </td> 26 </tr> 27 <tr> 28 <td> 29 <input type="checkbox" value="900" onClick="calc_total()" /> 30 B定食(900円) 31 </td> 32 </tr> 33 <tr> 34 <td> 35 合計金額: 36 <input type="text" name="goukei" /> 37 </td> 38 </tr> 39 </table> 40</form> 41<script> 42console.log(Array.isArray(document.myform)); 43// => false 44 45console.log(document.myform instanceof HTMLElement); 46// => true 47 48// ちなみに配列だと… 49const arr = [1, 2]; 50console.log(Array.isArray(arr)); 51// => true 52 53console.log(arr instanceof HTMLElement); 54// => false 55 56function calc_total() { 57 let kingaku = 0; 58 for (let i = 0; i < document.myform.length - 1; i++) { 59 if (document.myform.elements[i].checked) { 60 kingaku += parseInt(document.myform.elements[i].value, 10); 61 } 62 } 63 document.myform.goukei.value = kingaku + "円"; 64} 65</script>

投稿2019/05/19 01:35

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<form name="myform">

HTML

1<form name="myform">

この書き方をする資料は基本的に古いので、最新の資料を参考にすることをお勧めします。
あえて古い書き方に則るのであれば、document.myform ではなく、document.forms['myform'] と書いて下さい。

  • document.myform はform要素以外のname属性を持つ要素にもマッチし、同じ名前を持つ要素が複数存在した場合にマッチさせる為のコードが変化します。
  • <form name="myform"> における myform という名前はform要素群の中で一意の名前でなければなりませんが、form要素でなければ同じ名前を定義する事は可能です

HTMLFormElement#elements

form要素ノードの elements プロパティが指すオブジェクトは疑似配列であり、length プロパティを持ちます。

HTML

1<script> 2'use strict'; 3function calc_total () { 4 var total = 0; 5 var elements = document.forms['myform'].elements; // 疑似配列(HTMLFormControlsCollection)を得る 6 7 for (var i = 0, len = elements.length; i < len; ++i) { // form関連要素ノード群を繰り返し処理 8 var input = elements[i]; 9 10 if (input.type === 'checkbox' && input.checked) { // 対象がcheckboxかつcheckされているなら 11 total++; 12 } 13 } 14 15 elements['goukei'].value = total; 16} 17</script> 18<form name="myform"> 19 <table border="1"> 20 <tr> 21 <td> 22 <input type="checkbox" value="500" onClick="calc_total()"> 23 ラーメン(500円)</td> 24 </tr> 25 <tr> 26 <td> 27 <input type="checkbox" value="600" onClick="calc_total()"> 28 チャーハン(600円)</td> 29 </tr> 30 <tr> 31 <td> 32 <input type="checkbox" value="600" onClick="calc_total()"> 33 酢豚(600円)</td> 34 </tr> 35 <tr> 36 <td> 37 <input type="checkbox" value="800" onClick="calc_total()"> 38 A定食(800円)</td> 39 </tr> 40 <tr> 41 <td> 42 <input type="checkbox" value="900" onClick="calc_total()"> 43 B定食(900円)</td> 44 </tr> 45 <tr> 46 <td> 47 合計金額: 48 <input type="text" name="goukei"> 49 </td> 50 </tr> 51 </table> 52</form>

Re: ryo317 さん

投稿2019/05/19 02:43

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/length

lengthがあるからって、配列というわけではないです。その考え方だとstringもlengthがあるので配列だということになってしまいます

https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/elements

投稿2019/05/18 17:29

編集2019/05/18 17:30
papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

i<document.myform.length-1;
このコードのi と比較している length-1 とは myform が配列みたいになっているということでしょう か?

document.myform は html内でname="myform" となっている部分のhtmlタグ要素をオブジェクトとして取得しています。
質問の例だと <form name="myform"> のformタグを、Formオブジェクトとして取得します。
Formオブジェクトのlengthプロパティは、form内にあるコントロールの数を返します。
ここでいうコントロールというのは、inputタグや、selectタグなど、フォームの入力要素の事です。

  1. <input type="checkbox" value="500" onClick="calc_total()">
  2. <input type="checkbox" value="600" onClick="calc_total()">
  3. <input type="checkbox" value="600" onClick="calc_total()">
  4. <input type="checkbox" value="800" onClick="calc_total()">
  5. <input type="checkbox" value="900" onClick="calc_total()">
  6. <input type="text" name="goukei">

要素は全部で6個なので、document.myform.length-1 は6-1で「5」になります。

myform.elements[i] のコードの意味も教えてください

myform.elements はフォームに含まれるコントロールの配列みたいなもの
(正確に言うと配列の様にアクセス可能なオブジェクト)を返します。
これには上記の6個の要素が入っています。

配列のキーは0から始まり、
myform.elements[0] とすると、1つ目の要素が取得出来ます。
質問例だとここのアクセスは変数「i」を使っているので、for文のループとの組み合わせにより
「form内の入力要素を順番に取得する」という処理を実行しています。

回答書くにあたって参考にした資料
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement

投稿2019/05/18 17:58

Eggpan

総合スコア2665

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問