Is there a way to change the text (price) when I select an option?

            <div class="single-pro-details"> <!--Customize in the CSS-->
                <h6>Home / Beats</h6>
                <h4>Unique Lil Tecca Type Beat - New Love</h4>
                <h2 id="price">$20</h2>
                <select id="select">
                    <option>Select License</option>
                    <option>MP3</option>
                    <option>Tagged WAV</option>
                    <option>Un-Tagged WAV</option>
                    <option>Stems</option>
                    <option>Exclusive</option>
                </select>

Upon selecting "Exclusive," the price changes accordingly.

I have been exploring this website for such offerings and I have a question about it.

javascripthtmlcss

Answer №1

I trust this will meet your needs :).

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

// Prices are not specified, so I have created some examples
let prices = {
  "Select Licence": 'Please choose a license below',
  "MP3": '$15',
  "Tagged Wav": '$10',
  "Un-Tagged Wav": '$17',
  "Stems": '$23',
  "Exclusive": '$31'
}

// Event listener that updates the price text based on the selected option in the dropdown
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">Please choose a license below</h2>
<select id="select">
 <option>Select License</option>
 <option>MP3</option>
 <option>Tagged Wav</option>
 <option>Un-Tagged Wav</option>
 <option>Stems</option>
 <option>Exclusive</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the text field's border color if the field is not empty

On my website, there is a TextField where users can enter values to perform a site search. My question pertains to the border color of this field. Normally, the border color is black when the field is not in use. However, when a user clicks on the field an ...

javascriptreactjsmaterial-ui

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

javascriptangulartypescriptvideo-upload

Using Restify to Serve CSS FilesLearn how to use Restify to

Currently, I am developing a node application that requires serving static files like JavaScript and CSS. In my project structure, I have the following layout: -MyProject -backend -index.js -frontEnd -index.html -js ...

javascriptnode.jsbackendrestify

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

csssasszurb-foundationcompass-sass

Clicking on a Vuetify v-btn with the :href attribute set to download will open the XML file

I'm having trouble getting the v-btn to download an XML file instead of opening it in the browser. <v-btn :disabled="!exportUrl" block x-large height="100" color="primary" :href="exportUrl" download> ...

javascripthtmlvue.jsvuetify.js

Include a quantity dropdown menu on the cart page of your Shopify store's debut theme

Hey there! I'm currently customizing the Shopify Debut theme and I'm trying to incorporate a quantity selector as a dropdown on the cart page. Unfortunately, I'm encountering some issues with this implementation. I've managed to succes ...

javascriptjqueryajaxshopify

Pass the JavaScript variable and redirect swiftly

One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...

javascripthtmlexpressredirectweb

Struggling to display Firebase Auth information resulting in 'undefined' value within React web application

When loading a user's profile page, I am trying to display their displayName and email information retrieved from Firebase Auth. I have implemented this logic within the 'componentDidMount' method by updating the state with the response dat ...

javascriptreactjsfirebasefirebase-authentication

What methods can be used to crop and style images in a similar manner using html and css?

Is there a way to replicate this specific method? I attempted to achieve the same look by using CSS masking, but the results weren't pleasing. Does anyone have suggestions on how to accomplish this using HTML/CSS? ...

htmlcssimagestylesheet

How to retrieve response cookies using RxJS Ajax

When using RxJS to make an Ajax call request, I am able to set the headers of the request. However, I am wondering how I can retrieve the Cookie from the RxJS Ajax Response? import { ajax } from 'rxjs/ajax'; ajax({ url: "some url", body: ...

javascriptajaxcookiesrxjs

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss

How to drop several pins on Google Maps with JavaScript

I am working on incorporating multiple markers into a Google map using ajax, javascript, and php. Although there are no errors in my code, the markers are not appearing as expected. I would greatly appreciate any assistance with this issue. Please refer to ...

javascriptphpajaxgoogle-mapsgoogle-maps-api-3

Issue: Child Pages not found in Nuxt RoutingDescription: When navigating

Currently working on a Nuxt application that utilizes the WordPress REST API to fetch content. While my other routes are functioning correctly, I am facing challenges with nested pages. The structure I have implemented in my Nuxt app is as follows: pages ...

javascriptvue.jsvuejs2vue-routernuxt.js

Automation of transmitting HTML data to a database

After dabbling in web development for some time, I've come to realize that transferring data between an HTML form and a database can be quite challenging. My usual solution involves using an AJAX call to a PHP script, as illustrated in the image below ...

htmlajaxdatabasexmlhttprequesthttprequest

The Angular Material md-menu element stubbornly refuses to close when clicked outside, especially if the target element has a fixed position and

I currently have a <md-menu> element implemented in my webpage. By default, the menu will close if clicked anywhere on the page. However, I have noticed that when clicking inside a fixed element with a specified z-index, the menu does not close. < ...

javascriptangularjsangularjs-material

What is the best way to split an AJAX response into different variables and effectively retrieve each one of them?

When using AJAX to fetch data from a database and display it in a text box, most examples found online only show how to display the AJAX response in one text box. But what if we need to separate multiple PHP variables retrieved from the AJAX response and d ...

javascriptphpajax

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

This is how it should appear: item item item item additional text here I am trying to create a layout where the list is in List View for benefits like virtual scrolling, but the entire layout needs to be within a Scroll View. I want to be able to con ...

javascriptangularlistviewnativescriptscrollview

Leveraging ACE in conjunction with WT

UPDATE 3 Here is the finalized working code below. Remember to use ace.js from the src folder, as it will not work from the libs directory. You need the pre-packaged version from their site. WText *editor = new WText(root()); editor->setText("function( ...

javac++htmlajaxwt

Altering the backdrop upon hovering over an element

As a beginner in Javascript and Jquery, I am working on creating an interactive feature where hovering over one element changes the background image in another column. I have managed to write the function, but now I want to add an animation to the image tr ...

javascripthtmljquerycss

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs