###実現したいこと
ページ内のBMI計算を行うためのコードをサンプルコードを参照しながら模写していたのですが、うまくできなかったのでどなたかわかる方にお答えいただければと思い、お伺いしました。ページ内で体重と身長を記入して”計算”のボタンをクリックすると計算結果がalermされ、その後結果のテキスト欄に表示されるという仕組みをイメージしています。
コードは事前に書いていたものをコピペしたので、見にくい点が多々あるかと思いますが、ご容赦ください。
</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><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>
</main> <footer> <small>©2019 hibi-yoga-studio.</small> </footer> </body> </html><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>
試したこと
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>回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/02 16:29
2019/06/02 16:36
2019/06/02 16:37
2019/06/02 16:41
2019/06/02 16:42