কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে স্প্যান ট্যাগ থেকে প্রাইস ভ্যালু বের করে গুণফল দেখানো

HTML-এ একটি <span> ট্যাগ থেকে প্রাইস ভ্যালু এক্সট্র্যাক্ট করে, সেটিকে ইন্টিজারে কনভার্ট করে, একটি সংখ্যা দিয়ে গুণ করে ফলাফল একটি <div>-এ দেখানো।

পূর্ণ HTML + JavaScript উদাহরণ

<!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>
  <tr>
    <th>Value=</th>
    <td>
      <strong>
        <span class="purchase amount">
          <span></span>10
        </span>
      </strong>
    </td>
    <p id="demo"></p>
  </tr>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <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>
</body>
</html>

চলানো পদ্ধতি

ফাইলটি index.html নামে সেভ করুন এবং VS Code-এ "Open with Live Server" অপশন দিয়ে রান করুন।

আউটপুট

  • ব্রাউজারে: After multiplying the Value 10=100
  • কনসোলে: 100

ব্যাখ্যা

  • $(".purchase.amount") - ক্লাস সিলেক্টর (দুই ক্লাস: purchase এবং amount)
  • .text() - ইনার টেক্সট বের করে ("10")
  • .trim() - হোয়াইটস্পেস সরায়
  • .replace(',', '') - কমা থাকলে সরায় (বড় সংখ্যার জন্য)
  • parseInt() - স্ট্রিংকে ইন্টিজারে কনভার্ট করে
  • v * 10 - ১০ দিয়ে গুণ করা
  • $("#demo").text(...) - রেজাল্ট প্যারাগ্রাফে দেখানো

jQuery ছাড়া (Vanilla JS)

document.addEventListener('DOMContentLoaded', () => {
  const span = document.querySelector('.purchase.amount');
  const value = parseInt(span.textContent.trim().replace(',', ''));
  const total = value * 10;
  console.log(total);
  document.getElementById('demo').textContent = `After multiplying the Value 10=${total}`;
});
  1. JavaScript-এ XML ডেটা থেকে অ্যাট্রিবিউট ভ্যালু পাওয়া (jQuery attr)

  2. জাভাস্ক্রিপ্ট দিয়ে টু-ডু লিস্ট তৈরি করা

  3. জাভাস্ক্রিপ্টে tr ট্যাগ থেকে id বের করে নতুন td-তে দেখানো

  4. জাভাস্ক্রিপ্ট দিয়ে CSS ভেরিয়েবল (কাস্টম প্রোপার্টি) গেট ও সেট করা