Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Get price value from span tag and append it inside a div after multiplying with a number in JavaScript?
In JavaScript, you can extract a numeric value from a span element, multiply it, and display the result in another element. This involves getting the text content, converting it to a number, performing the calculation, and updating the DOM.
HTML Structure
First, let's create a proper HTML structure with a span containing the price and a div to display the result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Calculator</title>
</head>
<body>
<div>
<label>Original Price: </label>
<span class="price-value">25</span>
</div>
<div id="result"></div>
<script>
// Get the price value from span
const priceSpan = document.querySelector('.price-value');
const priceValue = parseInt(priceSpan.textContent.trim());
// Multiply by 3
const multipliedPrice = priceValue * 3;
// Display result in div
const resultDiv = document.getElementById('result');
resultDiv.textContent = `After multiplying by 3: ${multipliedPrice}`;
console.log(`Original: ${priceValue}, Multiplied: ${multipliedPrice}`);
</script>
</body>
</html>
Original: 25, Multiplied: 75
Using jQuery Approach
Here's the same functionality using jQuery for those who prefer this library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price Calculator with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<strong>Price: $<span class="purchase-amount">150</span></strong>
</div>
<div id="calculated-result"></div>
<script>
$(document).ready(function() {
// Extract price value and convert to integer
const priceText = $('.purchase-amount').text().trim();
const originalPrice = parseInt(priceText.replace(',', ''));
// Multiply by 2
const finalPrice = originalPrice * 2;
// Append result to div
$('#calculated-result').text(`Final price after doubling: $${finalPrice}`);
console.log(`Calculation: ${originalPrice} × 2 = ${finalPrice}`);
});
</script>
</body>
</html>
Calculation: 150 × 2 = 300
Handling Formatted Numbers
When dealing with prices that contain commas or currency symbols, you need to clean the text first:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatted Price Calculator</title>
</head>
<body>
<div>
<span class="formatted-price">$1,250.50</span>
</div>
<div id="output"></div>
<script>
const priceElement = document.querySelector('.formatted-price');
const rawText = priceElement.textContent;
// Remove currency symbol and commas, then convert to float
const cleanPrice = parseFloat(rawText.replace(/[$,]/g, ''));
// Multiply by 1.5
const adjustedPrice = cleanPrice * 1.5;
// Display formatted result
document.getElementById('output').innerHTML = `
<p>Original: ${rawText}</p>
<p>After multiplying by 1.5: $${adjustedPrice.toFixed(2)}</p>
`;
console.log(`${cleanPrice} × 1.5 = ${adjustedPrice}`);
</script>
</body>
</html>
1250.5 × 1.5 = 1875.75
Key Steps
The process involves four main steps:
-
Select the element: Use
querySelector()or jQuery selectors - Extract text: Get the text content and clean it if necessary
-
Convert and calculate: Use
parseInt()orparseFloat()for conversion - Update DOM: Display the result in the target element
Conclusion
Extracting and manipulating price values from span elements is straightforward with JavaScript. Always clean the text data before conversion and use appropriate parsing methods for integers or decimals.
Updated on: 2026-03-15T23:19:00+05:30
1K+ Views
Advertisements