質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5348閲覧

ボタンをクリックして表示される文字列を条件分岐して表示させたい

saki_program

総合スコア31

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/12 01:44

編集2017/08/12 01:47

テキストボックスに数値を入力して、その値によって文字列を表示したいです。
しかし、どの値を入れても、最初の条件にマッチし、「軽すぎ」としか表示されません。
おまけに、formタグの表示や、画像の表示まで、ボタンを押すと消えてしまい、「軽すぎ」という文字だけが表示され、cssも適用されなくなります。

javascript

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <link rel="stylesheet" href="css/style.css"> 7 <script> 8 </script> 9</head> 10<body> 11<br /> 12<form name="js"> 13<center>あなたの体重は?</center> 14<center><input type="text" id="body" name="weight"></center> 15<center><input type="button" value="決定ボタン" id="bt"/></center> 16</form> 17<script language="javascript" type="text/javascript"> 18var taijyu = document.js.weight.value; 19taijyu = Number(taijyu); 20var bt = document.getElementById( 'bt' ); 21bt.addEventListener( 'click', function( e ) { 22if (taijyu < 60) { 23 document.write("<center>軽すぎ</center>"); 24} else if(taijyu >= 60 && x < 70) { 25 document.write("<center>理想のサイズです</center>"); 26} else { 27 document.write("<center>重すぎ</center>"); 28} 29 }, false ); 30</script> 31<img src="images/sample.png"> 32</body> 33</html> 34

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

下記をaddEventListener内に移してください。

JavaScript

1var taijyu = document.js.weight.value; 2taijyu = Number(taijyu);

追記:

document. write は使わないようにしましょう。center要素はHTML5で非推奨です。

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="css/style.css"> 7 <style> 8 .center { 9 margin-top: 1em; 10 text-align: center; 11 } 12 </style> 13</head> 14<body> 15<!-- <br /> brは文章の改行に使うものなので隙間を空けたければCSSで。 --> 16<form name="js"> 17 <div class="center"> 18 <p>あなたの体重は?</p> 19 <div><input type="text" id="body" name="weight"></div> 20 <div><input type="button" id="bt" value="決定ボタン"/></div> 21 </div> 22</form> 23<div id="result" class="center"></div> 24<script language="javascript" type="text/javascript"> 25var bt = document.getElementById( 'bt' ); 26bt.addEventListener( 'click', function( e ) { 27 var result = document.getElementById( 'result' ); 28 var taijyu = document.getElementById( 'body' ).value; 29 taijyu = Number( taijyu ); 30 if ( taijyu < 60 ) { 31 result.innerHTML = '軽すぎ'; 32 } else if( taijyu >= 60 && x < 70 ) { 33 result.innerHTML = '理想のサイズです'; 34 } else { 35 result.innerHTML = '重すぎ'; 36 } 37 }, false ); 38</script> 39<img src="images/sample.png"> 40</body> 41</html>

【center 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/center

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ウェブ開発者アンテナ [W'ANEB]】
http://web.antenna.work/innerhtml/

投稿2017/08/12 01:57

編集2017/08/12 02:21
kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saki_program

2017/08/12 02:46

ありがとうございます。私が実現させたいことがまだ少しありまして、こちらですと文字列は表示されるのですが、formタグの表示や、画像の表示まで、ボタンを押すと消えてしまい、CSSも適用されなくなります。私の完成イメージとしては、最初のformタグの表示やボタンの表示はそのままで、ボタンの下にif文で分岐させた文字を表記させ、最初に表示させている画像も、3つの条件分岐に従って画像も変換させたいです。
saki_program

2017/08/12 03:09

消えませんでした。大変失礼しました。 8行目の } else if( taijyu >= 60 && x < 70 ) { を } else if( taijyu >= 60 && taijyu < 70 ) {  に修正しましたら表記されました。甘えてもう少し、質問なのですが、最初にsample.png の画像を置いているのですが、3つの条件に従い、画像も変換したいのです。sample.png以外に、sample1.png sample2.png sample3.png を持ってきた場合、条件1が合致した場合、文字列と共に、最初のsample.pngをsample1.pngに置き換えて表示させたいのです。
saki_program

2017/08/15 16:55

無事作成することができました。ありがとうございました。
guest

0

kei344さんのおっしゃる通り、体重取得の処理をaddEventListener内に移しましょう。
後、各要素にidを指定してそれを使いましょう

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <link rel="stylesheet" href="css/style.css"> 7 <script> 8 </script> 9</head> 10<body> 11<br /> 12<form name="js" id="form1"> 13 <div style="text-align: center" id="result"> 14 </div> 15<center>あなたの体重は?</center> 16<center><input type="text" id="body" name="weight"></center> 17<center><input type="button" value="決定ボタン" id="bt"/></center> 18</form> 19<script language="javascript" type="text/javascript"> 20//var taijyu = document.js.weight.value; 21var bt = document.getElementById( 'bt' ); 22bt.addEventListener( 'click', function( e ) { 23 var taijyu = document.forms.form1.body.value; 24 taijyu = Number(taijyu); 25 var result = document.getElementById('result'); 26 result.textContent = null; 27 if (taijyu < 60) { 28 result.append(document.createTextNode("軽すぎ")) 29 } else if(taijyu >= 60 && taijyu < 70) { 30 result.append(document.createTextNode("理想のサイズです")) 31 } else { 32 result.append(document.createTextNode("重すぎ")) 33 } 34}, false ); 35</script> 36<img src="images/sample.png"> 37</body> 38</html>

投稿2017/08/12 02:00

編集2017/08/12 02:57
motuo

総合スコア3027

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saki_program

2017/08/12 02:45

こちらで実行され、文字列が表示されるのを確認しました。ありがとうございます。私が実現させたいことがまだ少しありまして、こちらですと文字列は表示されるのですが、formタグの表示や、画像の表示まで、ボタンを押すと消えてしまい、CSSも適用されなくなります。私の完成イメージとしては、最初のformタグの表示やボタンの表示はそのままで、ボタンの下にif文で分岐させた文字を表記させ、最初に表示させている画像も、3つの条件分岐に従って画像も変換させたいです。
motuo

2017/08/12 02:56

回答を編集しました。 とりあえず、テキストを変更できるようにしましたので、画像もこれを参考にして参照するパスなどを変更すれば良いかと思います。
saki_program

2017/08/15 16:56

はい、参考にさせて頂きました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問