プロが教える店舗＆オフィスのセキュリティ対策術

Java Script を.jsファイルを利用しシンプル化する

解決済

  • 質問者：maru11586
  • 質問日時：
  • 回答数：4件

Dreamweaverで作成した商品ページで、以前は税抜価格のみを表示していたのですが、先の消費税総額表示対応のため、現在、Java Scriptを利用し、商品リストを下記のように記述し対応しているものの、商品リストページには多数の商品が掲載されているため、同じコードが多数並んでしまっています。

■HTML
------------------------------------------------------------
白菜<br>
100円<br>
<SCRIPT TYPE="text/javascript">document.write("（税込",Math.round(■ * 1.1),"円）")</SCRIPT>

■ブラウザ表示
------------------------------------------------------------
白菜
100円（税込110円）
------------------------------------------------------------

これを、.jsファイル等を作成して、記述を簡略化することは可能でしょうか？


※■の箇所は、Dreamweaverの機能で、置換の際に価格を正規表現で代入しています。
html化すれば「("（税込",Math.round(100 * 1.1),"円）")」となります。


上記につきましてご回答いただけますと幸いです。
以上、よろしくお願い申し上げます。

質問者からの補足コメント

  • fujillin　様

    この度は詳細なるアドバイスを頂き誠にありがとうございました。
    サイトに実装できました！

    外部ファイルからの読み込みも、jsファイルの場所を記述することで正常に動作しております。

    IEでの表示は確かに対応しておらず、バベル（ttps://babeljs.io/repl/）というサイトがあり、そこでIE対応のコードが得られるとのことでしたが、なぜかうまくはいきませんでした；

    しかし、IEでの閲覧者数は少なく、近くIEのサポートが終了するようですので、せっかくの綺麗なコードをIE対応にする必要はないかな、と考えております。

    これでおなじJavaScriptのコードがずらりと並んでいたソースファイルがすっきりです。

    本日中でこの投稿を閉じようとおもいます。
    ほんとうにありがとうございました！

    No.3の回答に寄せられた補足コメントです。 補足日時：2021/11/19 12:50
    通報する

  • Zimmerman様
    この度はご回答いただきありがとうございました。
    cssのクラスをJavaScriptはトレースできたのですね。その仕組みを理解し、クラスを有効活用できると今後の可能性が広がりそうですので勉強していきます。

    fujillin様
    まず、詳細なるアドバイスに厚く御礼申し上げます。
    今回、具体的なコードをお教えいただけねばきっと挫折していたように思えます；ｗ
    JavaScriptって何？　っていうくらいのど初心者の私には壁が高すぎていました。
    そんなま暗な状況の中、すばらしいコードをお教えいただき誠にありがとうございました。

    今回いただきましたコードをしっかり理解ができれば、今後様々な場面で役立っていくに違いありません。その意味でも大変感謝しております。


    今回、アドバイス頂きましたお二方に深く感謝し、当質問を締め切らさせていただきます。
    誠にありがとうございました！

      補足日時：2021/11/19 16:36
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No1です。



お礼にご提示のHTMLでは、商品名の後ろにdivの閉じタグだけがありますけれど、これって何なんでしょうね？

とりあえず、これは無いものと考えて、以下は、td.list_td 内の span.red の値を元に税込み価格を表示する例です。
※ 追加するのはtdの一番最後で、ご提示のように
　　<span class="tax_menu">(税込○○円)</span>
　の形式で追加します。
※ 当然ながら現在の、「<span><script>～～</script></span>」は不要となります。
※ 通常は、税込み価格は1/0.9倍(=1.1111…）だと思いますが、ご提示の計算に合わせて1.1倍にしてあります。
※ 価格対象部分に数値以外が含まれている時は、計算できずに 0円表示となりますのでご注意。
※ スクリプトをそのまま外部スクリプトにすることは可能です。
※ アロー関数、テンプレートリテラル、append等はIEは非対応のようなので、IEも含める場合は、多少記述を修正する必要があります。

以下、ご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const price = document.createElement('span');
price.classList.add('tax_menu');
document.querySelectorAll('td.list_td span.red').forEach(e=>{
const taxIn = Math.round((e.textContent | 0) * 1.1);
price.textContent = `(税込${taxIn}円)`;
e.parentNode.append(price.cloneNode(true));
});
});
</script>

</head>
<body>
<table>
<tr>
<td class="list">
<a href="001.html"><img src="../product/001_m.jpg" width="100" height="100" alt="" /></a></td>
<td class="list_td">
商品番号001<br>
<a href="001.html">白菜</a>
<span class="red">100</span>円
</td>

<td class="list">
<a href="002.html"><img src="../product/002_m.jpg" width="100" height="100" alt="" /></a></td>
<td class="list_td">
商品番号002<br>
<a href="001.html">青梗菜</a>
<span class="red">80</span>円
</td>
</tr>
</table>
</body>
</html>
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答、誠にありがとうございます！

すばらしいですね！
当該のページの読み込みが完了すると、目的のクラスを探して、span.redの後に税込表示を繰り返しさせていくのですね・・・

現在、まるで理解できていませんが、頂きましたコードのひとつひとつを理解してサイトに組み込んでいきたいと思います。

>商品名の後ろにdiv

商品名の箇所、<div style="margin-bottom : 1em;">を入れていまして、長くなりややこしくなるかなと思い、前だけを削除して、後の削除わすれでした；　反対にややこしくなってしまい申し訳ございませんでした。


この度は取り急ぎの御礼にて失礼いたします。
重ね、まことにありがとうございました！

通報する
お礼日時：2021/11/19 10:02

No.4

  • 回答者： fujillin
  • 回答日時：

No3です。



ひとまず、なんとかなったようですので、よかったですね。

＞そこでIE対応のコードが得られるとのことでしたが、
＞なぜかうまくはいきませんでした；

手元にIEがないので、動作確認はできないのですが、No3のスクリプトをそのままの内容でIEでも動作するように書き直すとこんな感じかなと思います。ご参考までに。
（別の書き方もありそうな気はしますけれど…）

window.addEventListener('DOMContentLoaded', function(){
const elms = document.querySelectorAll('td.list_td span.red');
const price = document.createElement('span');
price.classList.add('tax_menu');
Array.prototype.forEach.call(elms, function(e){
const taxIn = Math.round((e.textContent | 0) * 1.1);
price.textContent = '(税込' + taxIn + '円)';
e.parentNode.appendChild(price.cloneNode(true));
});
});
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん、補足のコメントありがとうございます。

お教えいただきましたコードを試してみたところ、IEでも正常に表示されました。

> アロー関数、テンプレートリテラル、append等

今回の件でいろいろ調べていますと、やはり先にお教えいただきました手法が綺麗に思え、初めにお教え頂きましたコードで対応し、そのコードをしっかり理解し、併せHTMLのサイト構造もそれに見合うように整えていきたく思います。

長年、googleの検索順位で1～2位をずっと保っていたページが、総額対応のために同じjavaScriptのコードを1ページ内に無数に組み込んだ後、一気に乱高下（圏外になったりその翌日には5位くらいに戻る、というような）しはじめたこともあっての今回の質問だったのですが、しばらく楽しみに様子を見たいと思います。

この度の件、重ね、深く感謝申し上げます。
ありがとうございました！

通報する
お礼日時：2021/11/19 14:58

No.2

  • 回答者： Zimmerman
  • 回答日時：

正攻法でやるなら、htmlの価格表示部分に何らかのクラスを付きのタグをつけて


例えば
<p class="priceWithoutTax">100円</p>
など。
Dreamweaverの検索置換処理ができるならば、
classを付けて行くのもできそうですが。

JavaScriptで上記のクラス名のついたオブジェクトを捕捉することができます。↓
getElementsByClassName("priceWithoutTax")
これを使い税込価格を追加していきます。for文で一括で処理できます。


また、上記のようなクラスを使わないで、
「0000円」という表記を正規表現で検索していって、
マッチした部分に税込価格を付け加えて行くこともできますが、
思わぬ部分でマッチしてしまうということがあるので、気をつける必要があるかと。

プログラム全部をここに書くのは大変ですので、大筋のみです。
あとは調べてみてください。
jsを外部ファイルとするのは全然可能です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

なるほど、ユニークなクラスを追加することでその値を補足できるのですね。それでしたらその値に1.1を掛ければいいだけですのでシンプルですね。クラスの付加はDWの正規表現の置換できます。

しかしJavaScript、さっぱりで、for分というのが繰り返しのようですが、値を抽出し、税率を掛けて、出力（priceWithoutTax()とかになるのでしょうか？）、となる流れで、なぜループを使用するのかなど、現時点でよく理解できていませんが、調べてみようと思います。

ご回答、まことにありがとうございます！

通報する
お礼日時：2021/11/18 16:56

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



可能だとは思いますけれど、対象部分を特定できる何かがある方が確実ですね。
（直接でなくても良いけれど、あるクラス内とか、必ずリスト内の〇番目の項目になっているとか‥）

ご提示の情報の範囲だけでやるなら、「○○円<br>」のような記述を探して、全部を置換える（追加する）ような処理になってしまいますけれど、それだと、もしも対象にしたくない部分があったとしても、置換えられてしまいますので。

※ ご質問には直接関係ありませんけれど、■ブラウザ表示の部分は
＞白菜
＞100円（税込110円）
ではなくて、
　白菜
　100円
　（税込110円）
のようになるのでは？
他に、何か「<br>」を打ち消すような仕組みがしてあるのでしょうかね？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ブラウザ表示の箇所、仰せのとおりです；
とくに<br>を消すようなことはしておりません。

実際には下記のコードで記述しており、テーブルの<td>の箇所はすべて同じコードです。（もちろん商品番号・品名・価格は違いますが）

<tr>
<td class="list">
<a href="001.html"><img src="../product/001_m.jpg" width="100" height="100" alt=""></a></td>
<td class="list_td">
商品番号001<br>
<a href="001.html">白菜</a></div>
<span class="red">100</span>円
<span class="tax_menu"><SCRIPT TYPE="text/javascript">document.write("（税込",Math.round(100 * 1.1),"円）")</SCRIPT></span>
</td>

したがいまして、<span class="red">100</span>円 の後で、かならず（税込・・・円という形にはなりますが、td内の何行目にくることは、商品名に改行が入ったりしますので（たとえば、白菜<br>奈良産）、一律ではありません。

通報する
お礼日時：2021/11/18 15:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報