前提・実現したいこと
ProgateのPHP編をやっておりますが、ちょっとしたアレンジを自分で加えようと思いました。
foreachを使って出力したhtmlにjavascriptを使って、
①入力された文字がリアルタイムに出るようにしたい
②PHPのクラスに入っている数値をJavaScriptのコード内で使用して、計算したい
以上をやっていますが、なかなかうまくいきません。
発生している問題・エラーメッセージ
foreachを4回まわすのですが、先頭のものしかJavaScriptが動きません。 さらに、(入力された数字*PHPで入力してある数値=定価)のコードを書いてありますが、 そちらは4回目の定価しか反映されません。。
該当のソースコード
HTML
1 <h3>メニュー<?php echo Menu::getCount() ?>品</h3> 2 <form method="post" action="confirm.php"> 3 <div class="menu-items"> 4 <?php foreach ($menus as $menu): ?> 5 <div class="menu-item"> 6 <img src="<?php echo $menu->getImage() ?>" class="menu-item-image"> 7 <h3 class="menu-item-name"><?php echo $menu->getName() ?></h3> 8 9 <?php if($menu instanceof Food): ?> 10 おすすめ度:<?php for($i=0;$i<$menu->getType();$i++): ?> 11 <img src="star.png" class="icon-spiciness"> 12 <?php endfor ?> 13 <?php else: ?> 14 甘さ度:<?php for($i=0;$i<$menu->getDelicious();$i++): ?> 15 <img src="heart.png" class="icon-spiciness"> 16 <?php endfor ?> 17 <?php endif ?> 18 19 20<!-- 21ここからが該当のコードです 22注文を数字で受け取って、それを表示させます。 23さらにその入力された数字を、PHPのクラスに入っているお値段と掛けて、それをまた表示させたいです。 24--> 25 26 <p class="price">¥ <?php echo $menu->getTaxIncludedPrice() ?> (税込)</p> 27 <p>ご注文数: 28 <span class="output">0</span> 29 </p> 30 <p>合計金額: 31 <span class="total">0</span>円</p> 32 <input type="number" class="input" value="0" name="<?php echo $menu->getName() ?>"><span>個</span> 33 </div> 34 35 <?php endforeach ?> 36 37 </div> 38 <input type="submit" value="注文する"> 39</form> 40 </div> 41 42 <script> 43 (function () { 44 45 'use strict'; 46 47 var input = document.querySelector(".input"); 48 49 input.addEventListener('click', function() { 50 var order = input.value; 51 var outp = document.querySelector(".output"); 52 var totalp = document.querySelector(".total"); 53 54 55 if (input.value > 0) { 56 outp.textContent = order; 57 totalp.textContent = order * <?php echo $menu->getTaxIncludedPrice() ?>; 58 } else { 59 outp.textContent = 0; 60 } 61 }, false); 62 63 64 })(); 65 </script> 66
補足情報(FW/ツールのバージョンなど)
わかりづらいかもしれませんが、、、よろしくお願いします。
2020.02.28追記
phpのソースを拾って計算させるのは難しいということがわかりました。
もう少し勉強をしてみますが、
inputに入れた数字をspan class="output"に表示するのはphpがからんでないのでできると思ってます。
通常通りhtmlを記述するときであれば、inputタグのclass名の変えて値を取得し、
出力させるspanタグもclassを変えれば実装できると思うのですが
このようにforeachで1つのhtmlを何度か回す場合は、foreachにifをかまして、
1度目はこのクラスのインプット、アウトプット、2度目はまた違うクラス名のインプット、アウトプットと表示させるようにするしかないのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/27 13:23
2020/02/27 14:10