カウントアップ機能の内容を複数の要素に表示させたい

前提・実現したいこと

ネイティブのjavascriptを使って、
class countBlockの文字内容を書き換えてカウントアップされた数字を表示させたいです。
最初の文字はdata-firstの数字、最終的にdata-endの数字になったらカウントアップを中止させたいです。
どのようにしたら機能実装できるかご教授お願いいたします。

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

現状ではカウントアップ機能が動かず、data-firstの数字が表示されているだけです。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section><div class="box"><span class="countBlock" data-first="0" data-end="43">0</span></div></section>
    <section><div class="box"><span class="countBlock" data-first="02" data-end="22">0</span></div></section>
    <section><div class="box"><span class="countBlock" data-first="20" data-end="34">0</span></div></section>
    <section><div class="box"><span class="countBlock" data-first="01" data-end="3">0</span></div></section>
</body>
<script>

var elements = document.getElementsByClassName('countBlock');

const Def = function consolData(func){
    for(i=0;i<elements.length;i++){
        var start = elements[i].getAttribute('data-first');
        var end =  elements[i].getAttribute('data-end');
        setInterval(func(start,end) ,10);
        elements[i].innerHTML = start;
    }
}

const Math = function countUp(start,end) {
    start = start + 1;
    if(start >= end) {
        return;
    }
}

Def(Math);


</script>
</html>

試したこと

上記

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

サンプル

詳細はコード内のコメントに書きました↓

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6</head>
7<body>
8    <section><div class="box"><span class="countBlock" data-first="0" data-end="43">0</span></div></section>
9    <section><div class="box"><span class="countBlock" data-first="02" data-end="22">0</span></div></section>
10    <section><div class="box"><span class="countBlock" data-first="20" data-end="34">0</span></div></section>
11    <section><div class="box"><span class="countBlock" data-first="01" data-end="3">0</span></div></section>
12</body>
13<script>
14
15var elements = document.getElementsByClassName("countBlock");
16
17// Function.callでelementsをArray.prototype.forEachに渡し、二番目の引数として指定した無名関数を適用します
18Array.prototype.forEach.call(elements, (element) => {
19  // 属性の文字列を数字に変換します
20  const first = Number.parseInt(element.getAttribute("data-first"), 10);
21  const end = Number.parseInt(element.getAttribute("data-end"), 10);
22
23  // カウントの始点を設定します
24  let count = first;
25  element.textContent = first;
26
27  // カウンターの本体です
28  const counter = setInterval(() => {
29    count += 1; // カウントを1増やします
30    element.textContent = count; // カウントをelementの文字コンテンツとして出力します
31
32    // カウントがendに到達していたらカウンターを止めます
33    if (count >= end) {
34      clearInterval(counter);
35    }
36  }, 10);
37});
38
39</script>
40</html>

投稿2021/04/21 04:37

編集2021/04/21 04:39

itepechi

総合スコア248

minatonn

2021/04/21 04:47

ありがとうございます！！！書いていただいたサンプルコードを参考に勉強させていただきたいと思います！

itepechi

2021/04/21 04:48

お役に立てて何よりです

minatonn

2021/04/21 05:11

ちなみになのですが、 callメソッドで第二引数で指定されている(element) ってどのような役割があるのでしょうか？

itepechi

2021/04/21 05:19

(element) => {...}はアロー関数です：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions。 function式での関数定義と似ていますが、波括弧（{〜}）を省略するとreturn文を書かなくていいという特徴があります。サンプルではfunction式よりもシンプルで見やすいという理由でアロー関数式を採用しました。 const foo = function(a) { return a + 2 } console.log("foo ->", foo(1)) // foo -> 3 const bar = (a) => { return a + 2 } console.log("bar ->", bar(1)) // bar -> 3 const baz = (a) => a + 2 console.log("baz ->", baz(1)) // baz -> 3

minatonn

2021/04/21 05:49 編集

アロー関数の開設ありがとうございます！ (element)は無名関数の引数で、そして中身はcallメソッドの第一引数のelementsの内容が入っているってことですかね？？

itepechi

2021/04/21 07:44

Function.prototype.callの第一引数が呼び出した関数のthisになります第二引数以降は呼び出した関数の第一引数、第二引数、第三引数…と続きます例えば、以下の二つのコードには同じ働きが期待できます const someArray = [1, 2] someArray.push(15, 16) // -> [1, 2, 15, 16] const someArray = [1, 2] Array.prototype.push.call(someArray, 15, 16) // -> [1, 2, 15, 16]

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