【javascript】ボタン連打で数字をカウントアップする

第5回目では、「数値に応じて画像や文字を切り替えてみる」という作品を、javascriptを用いて作りました。今回の第6回目では、関数を用いて(function CountUp() という部分です) ボタンをクリックすると、数字がカウントアップされるアプリを作成してみました。

それでは今日もエッチに楽しくプログラミングを学習していきましょう。


index.html

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="center">
        <p>何回イケるかな?</p>
        <p>イッた回数: <span id="ikuiku">0</span></p>
        <div><input type="button" value="イクイク" onclick="CountUp();"></div>
    </div>
<p><img src="images/ikuiku.png" alt="" id="image"></p>
<script language="javascript" type="text/javascript">
var kaisu = 0;
function CountUp() {
    document.getElementById( "ikuiku" ).innerHTML = ++kaisu;
}
</script>
</body>
</html>

style.css

/**/

body {
  background-color: pink
}
 img { width: 100%; }

.center {
        margin-top: 0.5em;
        text-align: center;
    }
  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る