I'm making a website with products and a cart system. Basically, all the products' prices are displayed using an id of "price" in an tag, with the price being the text shown to the user. When adding an item to the cart, the code looks for the id="price" inside the tag and subsequently adds the price given in that line.

For example, a normal price line reads <h2 id="price">$8.99</h2> and the function picking it up uses var price = document.getElementById('price') to fetch the information. This works great.

HOWEVER

I am adding a new product with multiple options, and depending on the option the price updates. I have a working system in place to show the viewer the updated price based on their option, but this uses an tag because it is displayed through Javascript and needs to be updated.

The line that displays the price to the viewer looks like this:
<input type="text" id="price" value="24.99" /readonly="">

I'm pretty sure that because the price is displayed inside the tag, inside a value, the cart js doesn't know to look for it and therefore will not return a price.

Is there a way I can make a document.getElementById('price') fetch the value shown inside the <input>?

P.S. I have never really formally learned JS so I have no idea what I'm doing... I've mostly relied on Stack Overflow. Sorry if I seem like an idiot.