JavaScript初心者です。
予算、人数を入力するとBBQの標準的な肉・野菜・海鮮・ジュースの量を出すというものを一つのページ上で作っています。
具体的な値はデータベースを用いてこれから書いていくのですが、
クラス名"first"を初めに画面に出し、予算と人数を入力して確定ボタンを押すと"first"の下に"second"を表示、食材の量を調節した後にもう一度確定ボタンを押すと"third"が"second"の下に表示される
という動作をしたいのですが、
"second"はちゃんと隠れているけど確定ボタンを押した後一瞬しか表示されない、
"third"に関しては隠れてすらないといった状況です。
先ほど伝えたようにするにはどこをどう改善したらいいでしょうか。
ソースコードが長くなってしまい申し訳ありません。
よろしくお願いします。
<body> <? $aa=$_POST["money"]; if($aa==null){ $aa=0; } $bb=$_POST["person"]; if($bb==null){ $bb=0; } ?> <div id="first"> <form action="" method="post"> <h3>予算(円)</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $aa; ?>" min="0" max="200000" step="500" id="money" name="money"> <!--テキストボックスのinput--> <input type="text" value="<?echo $aa; ?>" id="result1" name="money"> <script> var result1 = document.getElementById("result1"); var slider1 = document.getElementById("money"); result1.addEventListener("change",function(){ slider1.value = result1.value; }) slider1.addEventListener("change",function(){ result1.value = slider1.value; }) </script> <h3>人数</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $bb; ?>" min="0" max="50" step="1" id="person" name="person"> <!--テキストボックスのinput--> <input type="text" value="<? echo $bb; ?>" id="result2" name="person"> <script> var result2 = document.getElementById("result2"); var slider2 = document.getElementById("person"); result2.addEventListener("change",function(){ slider2.value = result2.value; }) slider2.addEventListener("change",function(){ result2.value = slider2.value; }) </script> <input type="submit" value="確定" onclick="return hyoji1(0)"> </form> </div> <div id="second"> <hr> <script>document.getElementById("second").style.display="none";</script> <form action="" method="post"> <h2>各項目の標準的な値です。</h2> <h4>微調整を加える場合は、スライダーで調整してください。</h4> <h3>肉(g)</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $_POST['meat']; ?>" min="0" max="7000" step="10" id="meat" name="meat"> <!--テキストボックスのinput--> <input type="text" value="<? echo $_POST['meat']; ?>" id="result3" name="meat"> <script> var result3 = document.getElementById("result3"); var slider3 = document.getElementById("meat"); result3.addEventListener("change",function(){ slider3.value = result3.value; }) slider3.addEventListener("change",function(){ result3.value = slider3.value; }) </script> <h3>海鮮類(g)</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $_POST['sea']; ?>" min="0" max="5000" step="10" id="sea" name="sea"> <!--テキストボックスのinput--> <input type="text" value="<? echo $_POST['sea']; ?>" id="result4" name="sea"> <script> var result4 = document.getElementById("result4"); var slider4 = document.getElementById("sea"); result4.addEventListener("change",function(){ slider4.value = result4.value; }) slider4.addEventListener("change",function(){ result4.value = slider4.value; }) </script> <h3>野菜類(g)</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $_POST['vege']; ?>" min="0" max="5000" step="10" id="vege" name="vege"> <!--テキストボックスのinput--> <input type="text" value="<? echo $_POST['vege']; ?>" id="result5" name="vege"> <script> var result5 = document.getElementById("result5"); var slider5 = document.getElementById("vege"); result5.addEventListener("change",function(){ slider5.value = result5.value; }) slider5.addEventListener("change",function(){ result5.value = slider5.value; }) </script> <h3>飲み物類(ℓ)</h3> <!--初期値、最小値、最大値、1メモリの大きさを指定--> <input type="range" value="<? echo $_POST['drink']; ?>" min="0" max="40" step="1" id="drink" name="drink"> <!--テキストボックスのinput--> <input type="text" value="<? echo $_POST['drink']; ?>" id="result6" name="drink"> <script> var result6 = document.getElementById("result6"); var slider6 = document.getElementById("drink"); result6.addEventListener("change",function(){ slider6.value = result6.value; }) slider6.addEventListener("change",function(){ result6.value = slider6.value; }) </script> <input type="submit" value="確定" onclick="hyoji2(0)"> </form> </div> <script> function hyoji1(num) { var i = num if (i == 0) { document.getElementById("second").style.display="block"; } } </script> <div class="third"> <script>document.getElementById("third").style.display="none";</script> <hr> <center><table border="1"> <tr> <th>予算</th> <td><?echo $_POST['money']?> </td> </tr> <tr> <th>人数</th> <td><?echo $_POST['person']?></td> </tr> <tr> <th>肉類</th> <td><?echo $_POST['meat']?></td> </tr> <tr> <th>海鮮類</th> <td><?echo $_POST['sea']?></td> </tr> <tr> <th>野菜</th> <td><?echo $_POST['vege']?></td> </tr> <tr> <th>ジュース</th> <td><?echo $_POST['drink']?></td> </tr> </table></center> </div> <script> function hyoji2(num) { if (num == 0) { document.getElementById("third").style.display="block"; } } </script> </body>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。