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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1494閲覧

計算の結果が表示(alerm)されない

ZONO_MOMO

総合スコア16

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/02 13:37

###実現したいこと
ページ内のBMI計算を行うためのコードをサンプルコードを参照しながら模写していたのですが、うまくできなかったのでどなたかわかる方にお答えいただければと思い、お伺いしました。ページ内で体重と身長を記入して”計算”のボタンをクリックすると計算結果がalermされ、その後結果のテキスト欄に表示されるという仕組みをイメージしています。
コードは事前に書いていたものをコピペしたので、見にくい点が多々あるかと思いますが、ご容赦ください。

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ヨガスタジオOPEN</title> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $("#page-top a").click(function() { $('html,body').animate({scrollTop:0},1000); return false; }); }); </script>
<script> function fncBMI(){ var bmi, w, h; bmi = w/(h*h); w = eval(document.bmi.bmiWeight.value); h = eval(document.bmi.bmiHeight.value)/100; alert('あなたのBMI値は' +bmi+ 'です。'); document.bmi.bmiAns.value = bmi; } </script>
</head> <body> <header> <h1>ヨガスタジオ◯月◯日OPEN! 月額2,500円</h1> <figure> <img src="images/yoga-woman.jpg" alt="ヨガスタジオOPEN"> <figcaption>ヨガで心と体のバランスを整えよう。</figcaption> <p><a href="#cta">今すぐ申し込む</a></p> </figure> </header> <main> <h2> 事実、<span class="yellow-futo">30代以上の方</span>が、ヨガをはじめています。 </h2> <div class="cv-contents"> <figure> <img src="images/yoga-cv.jpg" alt="会員様の声"> <figcaption>体のバランスもアップ!</figcaption> </figure> <blockquote class="clearfix"> <h3> 体質が変わったお客様の声 </h3> 肩こりがなくなりました(30代)<br>最近ぎっくり腰になりません!(40代) </blockqoute> </div> <h3> 期待できる効果! </h3> <p class="kadomaru-box">ぽっこり<big><strong>お腹に</strong></big></p>
<form name="bmi"> <p>最近体型が気になる方はBMI値を見てみましょう!<br> 『BMI=体重(kg)÷身長(m)×身長(m)』</p> 体重:<input type="text" name="bmiWeight">kg<br> 身長:<input type="text" name="bmiHeight">cm <input type="button" value="計算" onclick="fncBMI()"><br> 結果:<input type="text" name="bmiAns"> </form> <p id="page-top"><a href="#">TOPに戻る</a></p> <p>他にも3つのヨガ効果!</p> <p><ul> <li>気持ちリセット</li> <li>体幹ほぐし</li> <li>デトックス</li> </ul></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/hcOdCYRgkig" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p id="cta"><a target="_blank" href="https://www.google.co.jp">お申し込みはこちらから</a></p>
</main> <footer> <small>&copy;2019 hibi-yoga-studio.</small> </footer> </body> </html>

試したこと

varの文字列をシングルクォーテーションで括るなど試みましたが、
何れにしても計算結果が表示されませんでした。
それ以外の動きに関しては問題ないように思われます。

補足情報(FW/ツールのバージョンなど)

正解のコードを下記に添付しておきます。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ヨガスタジオOPEN</title> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $("#page-top a").click(function() { $('html,body').animate({scrollTop: 0}, 1000); return false; }); }); </script> <script> function fncBMI() { var bmi, w, h; //BMI=bmi, 体重=w, 身長=h w = eval(document.bmi.bmiWeight.value); h = eval(document.bmi.bmiHeight.value) / 100; //mに変換 bmi = w / (h * h); alert('あなたのBMI値は' + bmi + 'です。'); document.bmi.bmiAns.value = bmi; } </script> </head> <body> <header> <h1>ヨガスタジオ○月○日(日)OPEN! 月額2,500円</h1> <figure> <img src="images/yoga-woman.jpg" alt="ヨガスタジオOPEN"> <figcaption>ヨガで心と体のバランスを整えよう。</figcaption> </figure> <p><a href="#cta">今すぐ申し込む</a></p> </header> <main> <p></p><h2>事実、<span class="yellow-futo">30代以上の方</span>が、ヨガをはじめています。</h2> <div class="cv-contents"> <figure> <img src="images/yoga-cv.jpg" alt="会員様の声"> <figcaption>カラダのバランスもアップ!</figcaption> </figure> <blockquote class="clearfix"><h3>体質が変わった会員様の声</h3> 肩こりがなくなりました(30代)<br>最近ぎっくり腰になりません!(40代)</blockquote> </div> <p></p> <p></p><h3>期待できる効果!</h3> ぽっこり<big><strong>お腹</strong></big>に<p></p> <form name="bmi"> <p>最近体型が気になる方はBMI値を見てみましょう!<br> 『BMI=体重(kg)÷身長(m)×身長(m)』</p> 体重:<input type="text" name="bmiWeight">kg<br> 身長:<input type="text" name="bmiHeight">cm <input type="button" value="計算" onclick="fncBMI()"><br> 結果:<input type="text" name="bmiAns"> </form> <p id="page-top"><a href="#">TOPに戻る</a></p> <p class="kadomaru-box">他に3つのヨガ効果!</p> <p></p><ul> <li>気持ちリセット</li> <li>体幹ほぐし</li> <li>デトックス</li> </ul><p></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/N4k2SKL0vvM?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> <p id="cta"><a target="_blank" href="https://www.google.co.jp">お申し込みはこちらから</a></p> </main> <footer> <small>©2019 hibi-yoga-studio.</small> </footer> </body>

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

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

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

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

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

guest

回答2

0

ベストアンサー

身長:<input type="text" name="bmiHeight">cm

<input type="button" value="計算" onclick="fncBMI()"><br>
結果:<input type="text" name="bmiAns">

このonclickの前のところに全角スペース入っているのではないでしょうか。

投稿2019/06/02 13:44

tail12

総合スコア607

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

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

ZONO_MOMO

2019/06/02 16:29

回答いただき有難うございます。 alermは表示されるようになったのですが、結果がNaNになってしまう原因は何故なのでしょうか。恐縮ですが、もしお分かりのようでしたらお答え頂ければ幸いです。
tail12

2019/06/02 16:36

これが原因ですね。 bmi = w/(h*h); w = eval(document.bmi.bmiWeight.value); h = eval(document.bmi.bmiHeight.value)/100; ↓↓↓ w = eval(document.bmi.bmiWeight.value); h = eval(document.bmi.bmiHeight.value)/100; bmi = w/(h*h); 使用している変数の値が w = eval(document.bmi.bmiWeight.value); にて代入されるのでそれまでは値が入っていない状態で計算されていたのが原因ですね。
tail12

2019/06/02 16:37

基本的にプログラムは上から順番に実行されるので、 先に式を作ってからあとから代入ということはできないので、計算などの場合は順序を次から気をつけましょう!
ZONO_MOMO

2019/06/02 16:41

早いご回答本当に助かりました! サンプル通りに行かずに勝手にコードを並び替えていたのを失念していました。有難うございます!
tail12

2019/06/02 16:42

よかったです!
guest

0

onclickの前に全角スペースが入っていたみたいです。
試してみたら、全角スペースを半角に変えてたらいけました!↓

<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ヨガスタジオOPEN</title> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $("#page-top a").click(function() { $('html,body').animate({scrollTop:0},1000); return false; }); }); </script> <script> function fncBMI(){ var bmi, w, h; bmi = w/(h*h); w = eval(document.bmi.bmiWeight.value); h = eval(document.bmi.bmiHeight.value)/100; alert('あなたのBMI値は' +bmi+ 'です。'); document.bmi.bmiAns.value = bmi; } </script> </head> <body> <header> <h1>ヨガスタジオ◯月◯日OPEN! 月額2,500円</h1> <figure> <img src="images/yoga-woman.jpg" alt="ヨガスタジオOPEN"> <figcaption>ヨガで心と体のバランスを整えよう。</figcaption> <p><a href="#cta">今すぐ申し込む</a></p> </figure> </header> <main> <h2> 事実、<span class="yellow-futo">30代以上の方</span>が、ヨガをはじめています。 </h2> <div class="cv-contents"> <figure> <img src="images/yoga-cv.jpg" alt="会員様の声"> <figcaption>体のバランスもアップ!</figcaption> </figure> <blockquote class="clearfix"> <h3> 体質が変わったお客様の声 </h3> 肩こりがなくなりました(30代)<br>最近ぎっくり腰になりません!(40代) </blockqoute> </div> <h3> 期待できる効果! </h3> <p class="kadomaru-box">ぽっこり<big><strong>お腹に</strong></big></p> <form name="bmi"> <p>最近体型が気になる方はBMI値を見てみましょう!<br> 『BMI=体重(kg)÷身長(m)×身長(m)』</p> 体重:<input type="text" name="bmiWeight">kg<br> 身長:<input type="text" name="bmiHeight">cm <input type="button" value="計算" onclick="fncBMI()"><br> 結果:<input type="text" name="bmiAns"> </form> <p id="page-top"><a href="#">TOPに戻る</a></p> <p>他にも3つのヨガ効果!</p> <p><ul> <li>気持ちリセット</li> <li>体幹ほぐし</li> <li>デトックス</li> </ul></p> <iframe width="560" height="315" src="https://www.youtube.com/embed/hcOdCYRgkig" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p id="cta"><a target="_blank" href="https://www.google.co.jp">お申し込みはこちらから</a></p> </main> <footer> <small>&copy;2019 hibi-yoga-studio.</small> </footer> </body> </html>

投稿2019/06/02 13:59

fumito_94

総合スコア679

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

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

otn

2019/06/02 15:11

そういう人にいつも言ってるのですが、 ・IMEの設定で、簡単に全角空白が入力できないようにしましょう ・全角空白が見えるエディタ/設定にしましょう
ZONO_MOMO

2019/06/02 16:38 編集

回答いただき有難うございます。 fumito様方のお陰で無事に解決することができました! @otn様 大変有用なご提案誠に有難うございます! 設定の変更を行って同じミスを繰り返さないように気をつけます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問