JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

スパンタグ（<span>）から価格の値を取得するには、まずタグ内のテキストを抽出し、文字列から整数へ変換します。その後、任意の数値を掛け合わせて計算結果を求め、ページ上の要素に表示できます。

処理の流れ

jQueryの .text() メソッドでスパンタグ内のテキストを取得し、.trim() で前後の空白を除去、さらに .replace(',', '') でカンマを削除したうえで、parseInt() を使って整数に変換します。この一連の処理を行うことで、「1,000」のような金額表記も正しく数値として扱えるようになります。

コード例

以下がサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <tr>
       <th>Value=</th>
       <td><strong><span class="purchase amount">
         <span></span>10</span></strong>
       </td>
       <p id="demo"></p>
   </tr>
</body>
<script>
   $(document).ready(function () {
       var v = parseInt($(".purchase.amount")
       .text()
       .trim()
       .replace(',', ''));
       var totalValue = v * 10;
       console.log(totalValue);
       $("#demo").text("After multiplying the Value 10=" + totalValue);
   });
</script>
</html>

実行方法

上記のプログラムを実行するには、ファイルを「anyName.html」（またはindex.html）という名前で保存し、ファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」を選択してください。

実行結果

これにより、ブラウザには次のような出力が表示されます。

JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

コンソールには以下のように出力されます。

JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

同様に、別の実行結果は次のようになります。

JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

コンソールへの出力は以下の通りです。

JavaScriptでspanタグから価格値を取得し、数値を掛けた結果を表示する方法

  1. JavaScriptでtrタグのidを取得し、新しいtdセルに表示する方法

    はじめにHTMLテーブルの各行（<tr>タグ）に設定されたid属性を取得し、それを新しい<td>セルとして表示したいケースは開発現場でよく見られます。本記事では、JavaScriptのdocument.querySelectorAll()メソッドとinsertCell()メソッドを組み合わせて実現する方法を、実際のコード例とともにわかりやすく解説します。サンプルテーブルの準備まず、例として次のようなテーブルを用意します。<table>   <tr id=StudentDetails>      &

  2. JavaScriptでCSS変数を取得・設定する方法

    JavaScriptを活用すると、CSS変数（カスタムプロパティ）の値を動的に読み取ったり、書き換えたりすることができます。ポイントになるのは、次の3つのメソッドです。 1. getComputedStyle() ― 適用済みスタイルの取得 getComputedStyle()メソッドは、対象の要素に実際に適用されているすべてのスタイル情報を含むオブジェクトを返します。このオブジェクトには、CSS変数の値も含まれています。 2. getPropertyValue() ― 目的のプロパティ値の取得 getComputedStyle()が返したオブジェクトに対してgetPropertyVal