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

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

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

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

Q&A

2回答

987閲覧

foreachを使ってhtmlを出力し、それにjavascriptを使いたい。

YYmd0525

総合スコア10

foreach

foreachは、List・Collection・Arrayといったデータ構造の各要素に対して繰り返し処理を実行するために扱われる、制御構造の構文です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/02/27 12:52

編集2022/01/12 10:55

前提・実現したいこと

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度目はまた違うクラス名のインプット、アウトプットと表示させるようにするしかないのでしょうか?

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

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

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

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

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

guest

回答2

0

手元にパソコンがないので、コードではなく手がかりを書いておきます。

「クライアントとサーバー間のやりとり」
私たちがWebサイトを閲覧するときのやりとりについて、大雑把に説明します。
chromeなどのブラウザ(クライアント)がWebサーバーに対してデータをリクエストします。

Webサーバーは、リクエストをもとに必要なデータを取り出し、整形し、クライアントに返します(レスポンス)。このデータの取り出しや整形にPHPなどのバックエンドの言語が使われます。

ブラウザは返ってきたデータをもとに、見た目を構築します。このとき、htmlを読み込み、JavaScriptを実行しています。

以上の流れをご覧になれば、分かる通りPHPはユーザにデータが行く前に処理をします。なので、ユーザの入力に合わせて計算させることはできません。

ajax通信を使えば、できないこともないですが、今回の場合だとJavaScript側で処理する、あるいは、ページ遷移を挟むという方法をとるのが一般的だと思います。

リアルタイムとのことなので、JavaScript側で計算するのがいいですね。

投稿2020/02/27 13:15

hayato7

総合スコア1135

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

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

YYmd0525

2020/02/27 13:23

早速のご回答ありがとうございます。 注文するボタンを押すと、その注文数とあらかじめクラスに定義されている各々の値段をかけたものが出力されるようになってます。 ページ遷移の事は以上のことでしょうか? foreachでの出力されたのちに、クライアントに返されて、 そこでjavascriptを処理する際に1つ目のものしか動かないのはなぜなのでしょうか…?
hayato7

2020/02/27 14:10

ページ遷移とは、ブラウザがリクエストを送り、レスポンス結果を画面に表示する一連の流れのことだと思っていただければいいと思います。 注文するボタンをおすと、httpメソッドのpostメソッドで、『confirm.phpのページをください』というリクエストがブラウザから、サーバーに送られます。(httpメソッドというのも聞いたことがないかもしれません。とりあえず、getメソッドとpostメソッドがあるということを覚えておいてください。余裕があれば、getはurl上に情報を載せ、postはメッセージボディ上に載せるということも覚えておいて損はありません。) そして、サーバーがPHPで書かれたプログラムの指示通りにデータをブラウザに返します。(ここでforeachは実行されます) ブラウザは、先程の回答と同じようにレスポンス結果を読み込み、画面として表示します。(JavaScriptはこの時読み込まれます) つまり、ブラウザ側での処理で、PHPの関数を呼び出すことができないのです。サーバー側では、PHPとhtmlとJavaScriptでできているファイルであったとしても、ブラウザ側では、htmlとJavaScriptで出来ているファイルになっているはずです。(chromeの検証ツールで確認すれば、PHPのコードがないことがわかります)
guest

0

金額に関するソースがPHPのクラス内にある場合、
フロント側に単価を吐き出すか非同期通信を行わなければ期待される機能の実装は難しいです。

<input type="hidden">などでHTMLとして単価を出力し、jsで必要な値の操作を行うといいかもしれません

投稿2020/02/27 15:29

akkman

総合スコア254

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

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

YYmd0525

2020/02/27 21:13

ご回答ありがとうございます。 ajax通信、聞いた事はありますが。。ちょっと調べてみます。 追記しましたが、それぞれのinputの中身を取得し、それぞれのoutputに出力させる方法はありますでしょうか?
akkman

2020/02/27 23:02

考えられる方法としては 1つは、<foreach $menus as $key=>$menu>として配列キーを出力できるので$keyを各classに含めてjs側で判別する方法 2つ目は、inputがonchangeしたらその親の中にあるoutputを指定してあげれば思うような操作ができると思います 必要なメソッドについては調べればすぐ出てくると思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問