Question 44261 in Html Question posted in
Some basic documentation can be found here.

Adding a dollar sign next to a span? – Html

I’m working on a budget app that lets the user write in their budget and as many expenses as the user wishes.
The total budget, expenses, and balance (each of these is a span tag in HTML) are kept in a container div.

I want to add a dollar sign next to each of these spans. How do I add a dollar sign that sits right next to the amount? I need to make it a separate tag from the money tags.

I tried adding it in the form of a template string such as

amount.innerHTML = `$${tempAmount}`
expenditureValue.innerText = `$${sum};

However, doing this results in messing up with numbers adding together. Adding more than one expense results in "NaN" appearing on the page.

I also tried adding it into the HTML page, but the dollar sign is skewed from the number result. It ends up looking like:

$
    10000

Any advice on what I can do?

Tags:

2

Answers


  1. 0

    Provided you have a class for the element, or the ability to add a class, you can always add a pseudo-element and set its content using CSS.

    const num = document.querySelector('.amount').textContent = 20;
    .amount::before {
  content: '$';
}
    <div class="amount"></div>
    Login or Signup to reply.
  2. 0

    Please try to add the symbol code. I think it make your code easier.

    amount.innerHTML = `&#36;${tempAmount}`
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search