JSでの表示・非表示

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>
				<!--初期値、最小値、最大値、１メモリの大きさを指定-->
        <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>
					<!--初期値、最小値、最大値、１メモリの大きさを指定-->
	        <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>
						<!--初期値、最小値、最大値、１メモリの大きさを指定-->
		        <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>
							<!--初期値、最小値、最大値、１メモリの大きさを指定-->
			        <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>
								<!--初期値、最小値、最大値、１メモリの大きさを指定-->
				        <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>
  <!--初期値、最小値、最大値、１メモリの大きさを指定-->
  <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件

確定ボタンを押したときsubmitされ画面遷移しています。まず、PHPで行うのかJavaScriptで行うのかはっきりさせましょう。

"third"に関しては隠れてすらない

HTML
1<!--div class="third"-->
2<div id="third">

投稿2017/08/10 01:37

x_x

総合スコア13749

"second"はちゃんと隠れているけど確定ボタンを押した後一瞬しか表示されない

サブミットされてページ遷移されてます。
私も知らなかったのですが、return falseでデフォルト動作を停止する時は、undefinedのようなfalsyな値ではなく、falseじゃないとダメみたいですね。

"third"に関しては隠れてすらない

idじゃなくてclassになってますよ。

投稿2017/08/10 01:49

Lhankor_Mhy

総合スコア36074

mountainbook

2017/08/10 03:14

ご回答、ありがとうございます！参考にさせていただきます

行動規範の内容に同意します

ベストアンサー

"second"はちゃんと隠れているけど確定ボタンを押した後一瞬しか表示されない

method="post"となっているので、<form>～</form>内の入力コントロール（input,selectなど）の内容をactionの指定先に送信しています。
つまり、画面遷移（というかほぼリロード）しているわけですね。
actionに何も指定していない場合は実行しているURL自身（自ファイル）に送信しています。
そのためhyoji1(0)は画面遷移が完了する前までの一瞬だけ動いたように見えます。
そもそもpost送信する必要があるかどうかという点も検討の余地がありそうですね。
inputの値を取得して他のinputに設定するというのはjavascriptでもできるわけですし、DBに保存は最後にまとめてPOST送信で良いと思います。

どこからどこまでをjavascriptで行い、どこからどこまでをPHPで行うかの役割分担をしておくべきかと思います。
現在のコードだとお互い利点を相殺してしまっています。

"third"に関しては隠れてすらない

class="third"となっているため、getElementByIdをしても取得先のコントロールがない状態です。
secondのときと同じくid="third"としましょう。
というか、非表示にするだけなのでjavascriptにすると長くなり、何をしているか分かりづらくなるので
いっそcssで直指定した方が見やすくなると思います。

HTML
1<div id="second" style="display:none;">
2
3<div id="third" style="display:none;" >

余談として下記の気づきも今後のコーディングの参考にしてください。

#PHPの記述について
現状のソースだとphpと認識されない箇所が幾つかあります。
例えば、<? echo としている箇所。

<?php としないと<?echo $aa; ?>という文字列が出力されます。

echoしかしないのであれば省略形の

<?=$aa ?>でも良いです。

また、POST送信していない状態で$_POSTを利用すると
「Notice: Undefined index: ～」のような配列の参照エラーが出ますので、
下記のようにPOSTか判定し、存在チェックをかけた上でまとめて変数に受けて出力した方が良いと思います。

PHP
1//変数初期値
2$money = "";
3$person= "";
4
5//POSTされたか判定
6if($_SERVER["REQUEST_METHOD"] != "POST"){
7 //moneyがあるか
8 if(array_key_exists("money",$_POST)){
9   $money = $_POST["money"];
10 }
11 //personがあるか
12 if(array_key_exists("person",$_POST)){
13   $person = $_POST["person"];
14 }
15}
16<th>予算</th>
17<td><?=$money?> </td>
18</tr>
19<tr>
20<th>人数</th>
21<td><?=$person?></td>
22</tr>