空の配列にHTMLから数字を読み取り、配列にいれたいです。

空の配列にHTMLから数字を読み取り、始めの関数で配列に数字を入れ、次の関数で平均と、配列の要素数を出力するのですが、平均と要素数が０になります。配列にちゃんと入れられてないような気がするのですが、方法が思いつきません。よろしくお願いいたします。

var taulukko = [];
function lisaaLuku(){
	var num = document.getElementById('luku');
	for (var i = 0; i<num; i++){
		return taulukko.push(num);
	}
	
}
function tulostaTiedot(){
	var sum = lisaaLuku();
	 {
    var total = 0;
	var average = 0;
    for (var i = 0, len = taulukko.length; i < len; i++) {
	total += taulukko[i];
	average = total/len;
	}	 
    return average;
};
}

miyabi_pudding

2020/08/10 17:48

回答しといてなんですが、 > 始めの関数で配列に数字を入れこれ、なんのどこの数字を入れるんですか？ HTMLも記載いただかないと、何をしたいのかがさっぱりわかりません。

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

回答3件

ベストアンサー

方法が思いつきません

HTMLのマークアップを工夫します（ご質問に示されていないので、勝手に例示します）。

例
リスト項目の子要素がそれぞれ持つ data-id 属性から取りたい。

html
1<ul id="luku">
2  <li data-id="1">ほげほげ1</li>
3  <li data-id="2">ほげほげ2</li>
4  :
5  <li data-id="n">ほげほげN</li>
6</ul>

JavaScriptではその文書構造に応じた DOM操作をするだけです。
が、console.log() で詳細に値を確認します。

javascript
1// HTMLCollectionの取得方法は様々ある。
2var listitems = document.getElementById("luku").children;
3//var listitems = document.querySelectorAll("#luku>li");
4//var listitems = document.querySelectorAll("#luku>[data-id]");
5console.log( listitems ); // HTMLCollection
6
7for (var i = 0, len=listitems.length; i<len; ++i) {
8  var item = listitems[i];
9  console.log(`#${i})`, item ); // HTMLLIElement（<LI>）
10  console.log(`#${i})`, item.dataset.id );
11  // =>数字（string）。演算するには数値（number）への変換が必要
12
13  // 以下、正しくループしてから考えても良い内容です。
14  //return taulukko.push(num);
15}
16

投稿2020/08/10 21:12

AkitoshiManabe

総合スコア5434

m.ts10806

2020/08/10 21:21

>HTMLのマークアップを工夫しますこれに1票。プログラムから扱いやすいデータにしておくのは定石ですね。

Chibichan

2020/08/11 05:03

ありがとうございます！

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

関数lisaaLukuにおいての、変数numには、数値ではなく、要素そのものが入っているため、
forの実行はされません。
要素数をとる時は、
Element.lengthです。
そして、idはHTML内で、一意のものでないといけないので、
（同じIDは、HTML内で一度しか出現させてはいけない）
document.getElementByIdにて、要素数を取得しようとすること自体が間違いです。
（上記ルールに基づくなら、lengthを使っても常に1にならなければいけない）

投稿2020/08/10 17:34

miyabi_pudding

総合スコア9555

Chibichan

2020/08/11 05:04

ありがとうございます！まだまだ勉強不足なので、参考になります。

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

たぶんやりたいことが全然できてないと思います。
一つひとつ何をやりたい行なのかと、それが達成できてるのかをログにだしたりしてみると良いと思います！

var taulukko = [];
function lisaaLuku(){
    var num = document.getElementById('luku');
    for (var i = 0; i<num; i++){
        //本当にreturnしちゃっていいんですかね？ループ一回しか回りませんよ。
        return taulukko.push(num);
    }

}
function tulostaTiedot(){
    // 合計ではないしつかってないです！
    var sum = lisaaLuku();
    // 意味のないスコープを入れるのは複雑にしてしまうのでやめましょう
     {
    var total = 0;
    var average = 0;
    // lenをここで宣言する必要はないですね。
    for (var i = 0, len = taulukko.length; i < len; i++) {
    total += taulukko[i];
    average = total/len; //これ最後以外無意味ですね
    }     
    return average;
};
}

↓確認してないですけど、たぶんこんな感じになると思います

function lisaaLuku(){
    var taulukko = []
    var num = document.getElementById('luku');
    for (var i = 0; i<num; i++){
        taulukko.push(num);
    }
    return taulukko

}
function tulostaTiedot(){
    var taulukko = lisaaLuku();
    var total = 0;
    var len = taulukko.length
    for (var i = 0; i < len; i++) {
    　　total += taulukko[i];
    }  
    var average = total/len;   
    return average;
};

投稿2020/08/10 17:42