CODEWITHSUNDEEP
javascriptevent-listenerdollar-sign
Ali
Ali

Reputation: 23

Add a dollar sign with an Event Listener

I am very new to this - how can I add a dollar sign using an event listener? Currently I have:

let dol = document.querySelector('#dollar');

dol.addEventListener('keyup', function(e) { {
  dol.value = "$" + dol.value;
  }
});

But this is adding a dollar sign for every digit.
I only need the one in front.

Upvotes: 2

Views: 113

Answers (2)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53598

Don't use JS, you don't need it. Amounts are numbers, and should only ever be numbers. Only the presentation needs a dollar sign, which is what we have HTML and CSS for.

Use a span for the currency symbol, and then use CSS to show the appropriate one:

fieldset {
  border: none;
  background: #eee;
  padding: 0.25em 0.5em;

  input {
    border: none;
    border-bottom: 1px dashed black;
    width: 3em;
  }

  &.dollar .currency:before {
    content: "$";
  }

  &.euro .currency:before {
    content: "€";
  }
}
<fieldset class="dollar">
  <label>Amount in dollars: </label>
  <span class="currency"></span>
  <input type="text">
</fieldset>

<fieldset class="euro">
  <label>Amount in euros: </label>
  <span class="currency"></span>
  <input type="text">
</fieldset>

Or you can set an :after on the labels and not have a dedicated currency indicating element:

fieldset {
  border: none;
  background: #eee;
  padding: 0.25em 0.5em;

  &.dollar label:after {
    content: "$";
  }

  &.euro label:after {
    content: "€";
  }

  input {
    border: none;
    border-bottom: 1px dashed black;
    width: 3em;
  }
}
<fieldset class="dollar">
  <label>Amount in dollars: </label>
  <input type="text">
</fieldset>

<fieldset class="euro">
  <label>Amount in euros: </label>
  <input type="text">
</fieldset>

Just note that you can't set a :before on the input elements, even though that would be the most "logical" place to put them, because :before and :after pseudo-classes are treated as sort-of-kind-of child content, and input elements can't have child content, so it'll do nothing (same for <img> for example. If it's a "void" element, :before and :after won't work).

Upvotes: 2

Mister Jojo
Mister Jojo

Reputation: 22320

eten : Just check with dol.value.startsWith("$")...

let dol = document.querySelector('#dollar')
  ;
dol.addEventListener('keyup', e =>
  {
  if (!dol.value.startsWith('$'))
    dol.value = "$" + dol.value; 
  });
label {
  margin      : .6rem;
  display     : block;
  font-size   : .8rem;
  font-weight : bold;
  }
label * {
  box-sizing : border-box;
  display    : block;
  font-size  : 1rem;
  width      : 16rem;
  padding    : .2rem .3rem;
  }
<label>
  input for dollars...
  <input id="dollar" type="text" >
</label>

const myForm = document.querySelector('#my-Form')
  ;
myForm.addEventListener('input', e =>  // for any input on form...
  {
  if ( ['money_1','money_2'].includes(e.target.name)
    && !e.target.value.startsWith('$')
    ){
    e.target.value = "$" + e.target.value.trim();
    
    if (e.target.value === '$') // you may need this one...
      e.target.value = '';  
    }

  });
myForm.addEventListener('submit', e =>
  {
  e.preventDefault(); // disable form submision.
  
  // get values...
  console.clear();
  console.log('money_1 = ', myForm.money_1.value );
  console.log('money_2 = ', myForm.money_2.value );
  });
label {
  margin      : .6rem;
  display     : block;
  font-size   : .8rem;
  font-weight : bold;
  }
label * {
  box-sizing : border-box;
  display    : block;
  font-size  : 1rem;
  width      : 16rem;
  padding    : .2rem .3rem;
  }
<form id="my-Form">
  <label>
    input 1 for dollars...
    <input name="money_1" type="text" required >
  </label>
  <label>
    input 2 for dollars...
    <input name="money_2" type="text" required>
  </label>
  
  <button>submit</button>
</form>

Upvotes: 2

Related Questions