Do anyone know how do i when i select option to change text(price)

Issue

            <div class="single-pro-details"> <!--Fix in css-->
                <h6>Home / Beats</h6>
                <h4>Lil Tecca Type Beat - New Love</h4>
                <h2 id="price">$20</h2>
                <select id="select">
                    <option>Select Licence</option>
                    <option>MP3</option>
                    <option>Tagged Wav</option>
                    <option>Un-Tagged Wav</option>
                    <option>Stems</option>
                    <option>Exlusive</option>
                </select>

And When I select for example Exlusive to change price

I Started Looking on this site for that so I’m Asking

Solution

I hope this should work for you :).

// get the elements
let select = document.getElementById('select');
let price = document.getElementById('price');

// You didn't specify the prices, so I made them up
let prices = {
  "Select Licence": '$20',
  "MP3": '$15',
  "Tagged Wav": '$10',
  "Un-Tagged Wav": '$17',
  "Stems": '$23',
  "Exlusive": '$31'
}

// When the value of select changes, this event listener fires and changes the text content of price to the coresponding value from the prices object
select.addEventListener('change', () => {
  price.textContent = prices[select.value];
});
<div class="single-pro-details"> <!--Fix in css-->
<h6>Home / Beats</h6>
<h4>Lil Tecca Type Beat - New Love</h4>
<h2 id="price">$20</h2>
<select id="select">
 <option>Select Licence</option>
 <option>MP3</option>
 <option>Tagged Wav</option>
 <option>Un-Tagged Wav</option>
 <option>Stems</option>
 <option>Exlusive</option>
</select>

Answered By – thisistemporary

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published