,の入った価格を、入力フォームに記載された個数と連動させて合計価格を出したい

,の入った数値のIｄを取得し、入力フォームに記載された個数をかけて合計金額を産出するJavaScriptを組みたいです。
JavaScriptの練習で取り組んでいるのですが、いろいろ試行錯誤してもなかなか動きません。
教えてくださるとうれしいです！お願いいたします。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
  <link rel="stylesheet" href="Pd.css"/>
  <link rel="stylesheet" href="../Top/All.css"/>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle"
       data-toggle="collapse" data-target="#gnavi">
        <span class="sr-only">メニュー</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">HOGETOWN</a>
    </div>
    <div id="gnavi" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="../Top/lastHtml.html">Top</a></li>
        <li><a href="">Outer</a></li>
        <li><a href="">Inner</a></li>
        <li><a href="">Backpack</a></li>
        <li><a href="">Footwear</a></li>
        <li><a href="">Tent</a></li>
        <li><a href="">Burner</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Cart</a></li>
        <li><a href="">User:Hayashi</a></li>
        <span class="glyphicon glyphicon-log-out"
        aria-hidden="true" aria-label="Right Align"></span>
      </ul>
    </div>
  </nav>
  <div class="ProductAll clearfix">
    <div class="Contents">
      <div class="ProductName">
        <p class="SDryCrew">S/S DRY CREW</p>
        <p class="Maker">THE NORTH FACE</p>
      </div>
      <div class="ProductDetails">
        <p>肌面には繊維内に水分を含まないポリプロピレン、
          表側に吸汗拡散機能をもたせたポリエステルを配備したアンダーウェアです。
          身体から出た汗をウエア表面へと迅速にシフトし、肌に触れる面には一切水分を
          残さない、戻さないというコンセプトで開発。通気性の高いグリッド状デザインと、
          疎水と給水という異なる性質を組み合わせたダブルフェイス構造で
          運動時の快適さを向上させます。極薄で軽く、フィット感の高いシルエットです。
        </p>
      </div>
      <div class="ProductBuy">
        <p>在庫数:100</p>
        <div class="indent">
          <p>価格:&yen;<span id="price">3,856</span></p>
          <p>個数:<input type="text" id="Number" name="productCount"
            max="100" min="1" onkeyup="count();" value="1">(1~100までを入力してください)</p>
          <p>小計:&yen;<span id="Subtotal">3,856</span></p>
        </div>
        <a href="../Buy/NewBuy.html"class="btn btn-default btn-sm" role="button">カートに入れる</a>
        <a href="../Top/lastHtml.html"class="btn btn-default btn-sm" role="button">前のページに戻る</a>
      </div>
    </div>
    <div class="ProductPicture">
      <img src="../img/04.jpg"alt="Product">
    </div>
  </div>
    <script src="../Top/last.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
    </script>
  </body>
  </html>
//以下外部スクリプト
function count(){
  strPrice = document.getElementById("price")
  numPrice = parseInt(strPrice.split(',').join('').trim());
  lastPrice= numPrice*document.getElementById("Number").value;
   document.getElementById("Subtotal").innerHTML = String(lastPrice).replece(/(\d)(?=(\d\d\d))+(?!\d))/g,'$1');
}

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

回答3件

ベストアンサー

以下の点を修正すると動作しましたが、いかがでしょうか？

jQueryの読み込みができていない。
92行目、replace関数のタイプミス(repleceになっていた)。
strPriceはテキスト内容をtextContentやinnerTextでとらないといけない。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8"/>
5    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
6          rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
7          crossorigin="anonymous">
8    <link rel="stylesheet" href="Pd.css"/>
9    <link rel="stylesheet" href="../Top/All.css"/>
10</head>
11<body>
12<nav class="navbar navbar-inverse">
13    <div class="navbar-header">
14        <button type="button" class="navbar-toggle"
15                data-toggle="collapse" data-target="#gnavi">
16            <span class="sr-only">メニュー</span>
17            <span class="icon-bar"></span>
18            <span class="icon-bar"></span>
19            <span class="icon-bar"></span>
20            <span class="icon-bar"></span>
21            <span class="icon-bar"></span>
22            <span class="icon-bar"></span>
23            <span class="icon-bar"></span>
24            <span class="icon-bar"></span>
25            <span class="icon-bar"></span>
26            <span class="icon-bar"></span>
27        </button>
28        <a href="#" class="navbar-brand">HOGETOWN</a>
29    </div>
30    <div id="gnavi" class="collapse navbar-collapse">
31        <ul class="nav navbar-nav">
32            <li><a href="../Top/lastHtml.html">Top</a></li>
33            <li><a href="">Outer</a></li>
34            <li><a href="">Inner</a></li>
35            <li><a href="">Backpack</a></li>
36            <li><a href="">Footwear</a></li>
37            <li><a href="">Tent</a></li>
38            <li><a href="">Burner</a></li>
39        </ul>
40        <ul class="nav navbar-nav navbar-right">
41            <li><a href="">Cart</a></li>
42            <li><a href="">User:Hayashi</a></li>
43            <span class="glyphicon glyphicon-log-out"
44                  aria-hidden="true" aria-label="Right Align"></span>
45        </ul>
46    </div>
47</nav>
48<div class="ProductAll clearfix">
49    <div class="Contents">
50        <div class="ProductName">
51            <p class="SDryCrew">S/S DRY CREW</p>
52            <p class="Maker">THE NORTH FACE</p>
53        </div>
54        <div class="ProductDetails">
55            <p>肌面には繊維内に水分を含まないポリプロピレン、
56                表側に吸汗拡散機能をもたせたポリエステルを配備したアンダーウェアです。
57                身体から出た汗をウエア表面へと迅速にシフトし、肌に触れる面には一切水分を
58                残さない、戻さないというコンセプトで開発。通気性の高いグリッド状デザインと、
59                疎水と給水という異なる性質を組み合わせたダブルフェイス構造で
60                運動時の快適さを向上させます。極薄で軽く、フィット感の高いシルエットです。
61            </p>
62        </div>
63        <div class="ProductBuy">
64            <p>在庫数:100</p>
65            <div class="indent">
66                <p>価格:&yen;<span id="price">3,856</span></p>
67                <p>個数:<input type="text" id="Number" name="productCount"
68                             max="100" min="1" onkeyup="count();" value="1">(1~100までを入力してください)</p>
69                <p>小計:&yen;<span id="Subtotal">3,856</span></p>
70            </div>
71            <a href="../Buy/NewBuy.html" class="btn btn-default btn-sm" role="button">カートに入れる</a>
72            <a href="../Top/lastHtml.html" class="btn btn-default btn-sm" role="button">前のページに戻る</a>
73        </div>
74    </div>
75    <div class="ProductPicture">
76        <img src="../img/04.jpg" alt="Product">
77    </div>
78</div>
79<script
80        src="https://code.jquery.com/jquery-3.2.1.min.js"
81        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
82        crossorigin="anonymous"></script>
83<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
84        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
85        crossorigin="anonymous">
86</script>
87<script>
88    function count() {
89        strPrice = document.getElementById("price");
90        numPrice = parseInt(strPrice.textContent.split(',').join('').trim());
91        lastPrice = numPrice * document.getElementById("Number").value;
92        document.getElementById("Subtotal").innerHTML = String(lastPrice).replace(/(\d)(?=(\d\d\d))+(?!\d)/g, '$1');
93    }
94</script>
95
96</body>
97</html>

投稿2017/04/17 12:57

s8_chu

総合スコア14731

退会済みユーザー

2017/04/17 13:22

ありがとうございます。動きました! id取得してそのあとのことを書かなくてはいけなかったのですね・・・誤字には、本当に気を付けます。。。 JQueryに関してはまだ手を付けていないのですが、.replace(/(\d)(?=(\d\d\d))+(?!\d)/g, '$1'); }←個々の部分でしょうか？（すいませんひっぱてきたコードなので理解が不十分です）

s8_chu

2017/04/17 13:46 編集

いいえ、その部分にjQueryは使用していません。質問者さんのコードは、bootstrapというWebアプリケーションフレームワークを使用していますが、それのjavascriptファイルではjQueryが使われているので、別途jQueryも読み込まなければなりません。

退会済みユーザー

2017/04/17 13:54

なるほど、bootstrapのものなのですね。いろいろ勉強させていただいてます。ありがとうございました！！

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

数値をカンマ区切りに整形するプラグインを書いた

投稿2017/04/17 13:10

退会済みユーザー

総合スコア0

退会済みユーザー

2017/04/17 13:27

ありがとうございます、JQueryに関してこれからなのですが（ライブラリということしかわかっていません・・・）拝読させていただきました。一度、このソースも用いて一度書いてみます。

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

JavaScriptで数値を桁区切り (カンマ区切り) にする方法

<!DOCTYPE html>
<html>
<head>
  <script>
  function count(){
  strPrice = document.getElementById("price")
    console.log(strPrice);
	var i = strPrice.split(',');	
}
</script>
</head>
<body>
   <p id = "price">
6,590
</p>
<p id = "Number" value = "2" >
</p>
<input type="button" onClick = "count()">
</body>
</html>

たぶんこれでもほぼ同じことしてると思うんですがstrPrice.split(',');でコンソールのほうにエラーありませんか？

投稿2017/04/17 12:03

編集2017/04/17 12:23

toutou

総合スコア2050

退会済みユーザー

2017/04/17 12:14

ありがとうございます。そのページは閲覧して、scriptのほうにも記述しています。

退会済みユーザー

2017/04/17 12:41

function count(){ strPrice = document.getElementById("price") var i = strPrice.split(','); lastPrice= i*document.getElementById("Number").value; document.getElementById("Subtotal").innerHTML = String(lastPrice).replece(/(\d)(?=(\d\d\d))+(?!\d))/g,'$1'); } このように書き直したのですがsplit functionでエラーが出ます・・・エラーの原因もいろいろ考えてみます・・・

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

あなたの回答