Skip to main content
本文から 4 文字削除
ソース リンク
KiYugadgeter
  • 4,358
  • 7
  • 60
  • 111

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setTimeout - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setTimeout - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setTimeout - Web API インターフェイス | MDN

参考のリンクが間違っていたので修正
ソース リンク
KiYugadgeter
  • 4,358
  • 7
  • 60
  • 111

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setInterval - Web API インターフェイス | MDNwindow.setTimeout - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setInterval - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setTimeout - Web API インターフェイス | MDN

回答を修正
ソース リンク
KiYugadgeter
  • 4,358
  • 7
  • 60
  • 111

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function (e) {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setInterval - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function (e) {
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setInterval - Web API インターフェイス | MDN

例のコードの場合、クリックされたときに一気に実行されているため表示されるのは4になってしまいます。そこで、遅延をさせるためにsetTimeoutという関数を使います。

下のコードはsetTimeoutを再帰的に呼び出す例ですが、ボタンをクリックすると1秒ごとに1ずつ増えていき、4になると止まります。


var button = document.getElementById("button");
var elem = document.getElementById("output-text");
button.onclick = function () {
    var elem.innerHTML = 0;
    setTimeout(function incr() {
        var num = parseInt(elem.innerHTML);
        if (num < 4) {
            num++;
            elem.innerHTML = num;
            setTimeout(incr, 1000);
        }
    }, 1000);
}


参考
window.setInterval - Web API インターフェイス | MDN

ソース リンク
KiYugadgeter
  • 4,358
  • 7
  • 60
  • 111
読み込んでいます