【javascript】数値に応じて画像や文字を切り替えてみる

第4回目では、if文「もし~ならば、もし~ならば、それ以外場合は~」条件分岐の基礎を学んで頂きました。
今回の第5回目で、if文を使い、数値を入力して、その値に応じた画像や文字を変換するアプリを作成していきます。

一つ補足説明がございます。
動画でも冒頭に解説はしてますが、centerタグを使って表記してました。
index.html

<center><input type="text" id="boin" name="oppai"></center>
<center><input type="button" value="決定ボタン" id="bt"/></center>

こちらの表記はHTML5においては非推奨となっているのです。
以下のような表記に変更しておりますので、ご注意下さいませ。
index.html

<div class="center">
        <p>あなたのバストサイズは?</p>
        <div><input type="text" id="body" name="weight"></div>
        <div><input type="button" id="bt" value="決定ボタン"/></div>
</div>

style.css

.center {
        margin-top: 0.5em;
        text-align: center;
}

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


index.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>
<!-- <br /> brは文章の改行に使う。隙間を空ける場合はCSSに。 -->
    <div class="center">
        <p>あなたのバストサイズは?</p>
        <div><input type="text" id="body" name="weight"></div>
        <div><input type="button" id="bt" value="決定ボタン"/></div>
    </div>
<div id="result" class="center"></div>
<img src="images/paipai5.png" alt="" id="image">
<script language="javascript" type="text/javascript">
var bt = document.getElementById( 'bt' );
bt.addEventListener( 'click', function( e ) {
    var result = document.getElementById( 'result' );
    var image = document.getElementById( 'image' );
    var bustsize = document.getElementById( 'body' ).value;
    if ( bustsize < 80 ) {
        result.innerHTML = 'あなたきっとスーパーモデル!';
        image.src = "images/chippai.jpg";
    } else if( bustsize >= 80 && bustsize < 90 ) {
        result.innerHTML = '理想のサイズです';
        image.src = "images/paipai.jpg";
    } else {
        result.innerHTML = '大きな胸で世の男性を癒して下さい。';
        image.src = "images/oppai.jpg";
    }
 }, false );
</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. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る