【javascript】if文の条件分岐で表示される文字列を変換

第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム表示ではなく、こちらが意図した数値を入力して、表示される文字列を変えてみるといったことをしていきます。

数値を入力して、表示される文字列を変える操作を学んでいきます。javascriptを用いてまずは、if文を学んで下さい。「もし~ならば、もし~ならば、それ以外場合は~」と言った具合の条件分岐をさせるものです。

バストサイズを入力して、表示される文字列を操作する。今日もエッチに楽しく学んでいきましょう。


index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/style.css">   
</head>
<body>
<br />

<center>あなたのバストサイズは?</center>
<!--<center><input type="text" id="boin" name="oppai"></center>
<center><input type="button" value="決定ボタン" id="bt"/></center>-->
<script language="javascript" type="text/javascript">
var x = 85;
if (x < 80) {
  document.write("<center>あなたきっとスーパーモデル!</center>");
} else if(x >= 80 && x < 90) {
  document.write("<center>理想のサイズですw</center>");
} else {
  document.write("<center>大きな胸で世の男性を癒して下さい。</center>");
}
</script>
<img src="images/paipai5.png">
</body>
</html>

style.css

/**/

body {
    background-color: pink
}

img {
    width: 100%;
}

次回は、テキストボックスに数値を入力し、決定ボタンを押すと、文字や画像が切り替わるものを作っていきます。

  • このエントリーをはてなブックマークに追加

関連記事

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

ピックアップ記事

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

ピックアップ記事

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