问题
I have made a checkout form that displays the cost of a product, the subtotal, GST cost, delivery cost, and total price. What id like to do is take the cost of each product which has the class class = "price" (but id assume that they may need an id), and add them together to get the total. This total would be calculated with an increase of 15% from the value of the subtotal plus the cost of delivery.
Here is the checkout form (sorry for the length) ~ there is some styling that isn't relevant as it is has been pulled from a page on the website.
Any help with this would be greatly appreciated. My guess is that they need an id, then I would use getElementById to get the value and add them together, but I don't know how I would do this.
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
<div class='payment-form'>
<div class='checkout-tabs'>
<div class='details-field'>
<div class='details-inputs'>
<h3>Accepted Payment Methods</h3>
<div class="icon-container">
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-apple-pay"></i>
<i class="fab fa-cc-amazon-pay"></i>
<i class="fab fa-cc-paypal"></i>
</div>
<label><i class="fa fa-user"></i> Full Name</label><input class='input-field ' type="text" placeholder="Bobby K Mack">
<label><i class="fa fa-phone-alt"></i> Phone Number</label><input class='input-field ' type="text" placeholder="(###) ###-####">
<label><i class="fa fa-envelope"></i> Email</label><input class='input-field ' type="text" placeholder="john@example.com">
<label><i class="fa fa-institution"></i> City</label><input class='input-field ' type="text" placeholder="Mount Cook">
<table class="half-input-table">
<tr>
<td>
<label for="Country"><i class="fa fa-globe"></i> Country</label><input class='input-field ' type="text" id="Country" name="Country" placeholder="NZL">
</td>
<td>
<label for="zip"><i class="fas fa-map-marker-alt"></i> Zip Code</label><input class='input-field ' type="text" id="zip" name="zip" placeholder="7999">
</td>
</tr>
</table>
<label for="input-field">Name on Card</label><input class='input-field ' placeholder="Bobby K Mack"></input>
<label for="input-field">Card Number</label><input class='input-field ' placeholder="####-####-####"></input>
<table class='half-input-table '>
<tr>
<td> <label for="input-field">Exp Year</label><input class='input-field ' placeholder="2021"></input>
</td>
<td> <label for="input-field">CVV</label><input class='input-field ' placeholder="123"></input>
</td>
</tr>
</table>
</div>
</div>
<div class='order-info'>
<div class='order-info-content'>
<h2>Cart <i class="fa fa-shopping-cart"></i></h2>
<div class='devider'></div>
<table class='order-table' id="checkout-itm-1">
<tbody>
<tr>
<td><img src='https://aoc-pim.s3.amazonaws.com/USA%20content/g2/CQ27G2/CQ27G2_F.png' width="100%"></img>
</td>
<td>
<br>
<span class='product-name'>AOC C27G2</span>
<button class="item-btn" onclick="removeItem1()">X</button>
<br>27" Full HD Curved Monitor<br>
<li class='product description'>Resolution: 1920x1080</li>
<li class='product description'>Refresh Rate: 165hz</li>
<li class='product description'>Response Time: 1 ms</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$429.00 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev1"></div>
<table class='order-table' id="checkout-itm-2">
<tbody>
<tr>
<td><img src='https://www.computerlounge.co.nz/data/media/images/catalogue/Products2/Peripherals/Mice/Logitech/22752_1.jpg?maxheight=950&maxwidth=600&quality=100&404=default.jpg' width="100%"></img>
</td>
<td>
<br> <span class='product-name'>Logitech G402 Hyperion Fury</span>
<button class="item-btn" onclick="removeItem2()">X</button>
<br>Gaming Mouse<br>
<li class='product description'>Movement Detection: Optical</li>
<li class='product description'>Programmable Buttons: 8</li>
<li class='product description'>Hand Orientation: Right Hand</li>
<li class='product description'>Maximum DPI: 4,000</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$94.89 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev2"></div>
<table class='order-table' id="checkout-itm-3">
<tbody>
<tr>
<td><img src='https://www.pbtech.co.nz/imgprod/H/S/HSTLOG4443629__1.jpg?h=1434805038' width="90%"></img>
</td>
<td>
<br> <span class='product-name'>Logitech G332</span>
<button class="item-btn" onclick="removeItem3()">X</button>
<br>Stereo Gaming Headset<br>
<li class='product description'>Sound Mode: Stereo</li>
<li class='product description'>Microphone: Yes</li>
<li class='product description'>Interface: 3.5mm</li>
<li class='product description'>Colour: Black</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$133.00 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev3"></div>
<table class='order-table' id="checkout-itm-4">
<tbody>
<tr>
<td>
<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEBMVFRUXEBYVFRgVFRUWFRAVFhcWFhUVFRUYHSggGBolGxUVITEhJSkrLi4uFyAzODMsNygtLisBCgoKDg0OGBAQGyslHSYrLS0rKzcrMCstKy4tNysrLi0uKy8tLTAtKy8tKy4wLTcrKystKy0rLSsuNS0rLysyLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABAIDBQYHAQj/xABNEAACAQIEAgUJBAcEBwgDAAABAgADEQQSITEFQQYTIlFhBzJScYGRobHBQnKSshQjYmOCwtEzQ1Oic4OEk+Hw8TRUZGWjw9LTFRYk/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwQF/8QAIBEBAQACAQUBAQEAAAAAAAAAAAECEQMhMUFRcRIiBP/aAAwDAQACEQMRAD8A7jERAREQEREBERAREQEREBERARLGNxlOijVKzrTRRdmdgqqPEnQTlHSvyyDWnwunnOxxFUEUx406ehfnqbDTYiB07jnHMNg6Zq4uqlJORY6sd8qKNXbwAJnHulfljr1bpw1OoT/HrBTUe3oUzdVB8bnXYTnnEMZVxFQ1cVUqV6p+250UamypawHgtgJYYlsuYkaAXN+zpY2A2BudPGB9KdEeli4pRTq2Stbb7NXTdPHvX5zZ5wnCXyU2BIORSCNCDYEEHkZ0Ton0vFS1HFEB9kfYVO4N3N8D69w3KIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiJpvS/yj4PAk0lP6RiB/c0iDkP719qY958DA3FmABJNgBck7Ad5nN+lflcw9G9LAKMVV2zg2w9M95qD+09S6eInNek/SjG8Qv+l1AlHcUKRK0gOXWHeofE6dwE1bEcRRRlpC/jso+pgZXpBxfE45usxmI61gTan5tHDnW2VB2b8r6mw1JmBbFZVABztzb7I15DnItaqzG7G/yHqHKUQMlwxixYsSdvryk6pRvvInARcsPAH5zMNTgblwoXoUj+5T8olypTnnBR+opfcA92n0kh1gbR0U6XlLUcU112Sod07hUPMftcuemo38G+o2+c4jUSZ/ot0rbDEUq12o8ubUfFe9f2fd3EOoRLeHrq6h0YMrC4INwR4GXICIiAiIgIiICIiAiIgIiICIkLi3FaGFpmriaqUqY3Zza57gN2PgNTAmzBdKOluE4eubE1LMR2Ka9qrV+6g5eJsPGc56ReVHEYi9PhlM0aexxFVR1jeNKmbhR4tc67Azm2LxlOm7Fy1euxuzly9R22s7G/1PhA3HpN0/x2OulK+Ew5+yjfr6g/bqjzR4L4i5mh1cfRojJRAY+Hm+1ufs+Eg8UxlZ7dYCikXC2KqR36+d/Ucpj4EjE4t6nnHTkBoo9n9ZZlMQKrxKbxeBs3Bca1ZiGAGWko0520v7got4TLNTmA6H61XH7v+Yf1m1PTgbBwP+wT+L4OwkthI3BB+pUeLfmJ+smMIEZ1kaqsmsJHqLAm9HOktTBtbV6JPbS+37SdzfA/EdW4bxCniKYq0WDKfeDzBHIjunEK6zcPJRVtVrp300a33SQT/mEDpMREBERAREQEREBERASirVVVLOQqgEkkgBQNySdhNN6Y+UjC4FjRQHEYkf3VM6UyRcdbU2QeAu2u05D0p6S18WQ3Eq1qd7phqWlMW70veob21a9tdoHRukvlXQE0eFoMRU2NZrjDoduzzqn1WX9ozl/G+IZqnXcRrtiK/wBlN8l+SIOzTXTwv4zA/wD5piBRot1Skm7sQGNyTvsg1015DWe0zSpEhBne+rkhgTuSGG+/L0tTAl4jE1qw7VqFL0RfMR4n393qMu0+HPTTNRo6Eee5AJHq39mgmNeq2js2W2xbv/ZUD5CR6/FdftOb+dUNyfUNQPbeQWcbxGqSFqEuFuoDbL2iTktsNT75YCq3mnKfRbn6jsYxFcOSXU3tvmv3W+vw7tbZwbkXVSwIvoL949+h+HfKPHBU2ItPM08p4ogZWGYdx3HqPKSaGBNU2oAsbXyW7QA3PcfZAj3nsttdSQwsQbEHcSpQTtA2DoX/AG7D9y3wZJujJNV6G4cCrfmaTfNT9JuLJAyfBf7P+I/STGkTg3mH75+SyYYFlpZcS+0svAh1hM95NqmXHW9LDuv+ZG/lMwdYSf0Kq5eIUPEup9tN7fG0DscREBERAREQEREBERA+WOnfEWGOx1WmQC3EKlO9gSBTuhIJ+78Zpr1CSSxJJ3JNyfXeZzpBUNaqSuprY3EMPEtV7P5phKlEjlKKbyZRrBR2B2rXJaxt90be+8gStHHMf9PV3yVGYwLI4PWk5r7k3Jl/E4Cgql1fMRsp0zeF5izQBTPTa5B1HP198tUg7nKFZm7lBYn2CQXqoZzpTt4KG+Z9nvl/BYnqwbnS5AHPx0/6Sipw+ogu6uova5BAvrpfa+p08TIlUBTtfS++u5iXfZV/HYlapvlF/S5n3f8AGR6bOLCnub+aDnOmouNbWvtPCzEeivP/AKzeMB0XtiOpa3a4QXQqDTDO1l7TDVtWNzzBta2k7cXFeS6jeOFy3WiU0DEAaE2Gp0JJA3O299e6bHiuC06FJi9dalUKCEogtTXUXz1WtfQm2UHXnMBhcY6Xy8/eDodCPVJ7u7KHewUqTvvyAIHO+1+6cmGydEl7asNihm2Os1rofT7NI/sfQzamWBJ4R5rfe+n/AAkwzFdHnc9b1gtap2RbZdQpB53AB9tuUyrQLbSy8usZZeBGqxwSrkxeHb/xNIexnCn4EzytInW5WV/RdW/CQfpA77ERAREQEREBERASxjq4p03qHZKbMf4QT9JfmC6eV8nDcawNiMFXse4mmwHxIgfL+BGuHPo0mqH3k3/ySfw3okz0w1R8jEaLYELzGdr6EgHTS1t9Db3hVIjMUXMyYYBRrqxDZV011zGbTw7GrVpiqDa9PMddUKntXPnCxBGtxp4Aqo0viPResmyZwb2Kak9rKBl3J1BsLgX30MwBod245HcTdeM9KSxFLC5VDMAajdka6G17ADXziAdNB3wuIdGDSpmorFnFnZeQQ3zZQRmJBtrfUX52uGG4FwwVaiqxKoO3VYb06aauw8baAcyQOc2BqAoUrZcpPnXILEg7EjuPPkR2bWLP50Zw7EOymw7DWsO0ynsm52ys6Pbnk8JJ/RRUc5tVXQDl6tOQFtPETpx4Y5Td7Rzv9X4mdEeEfpZe6gC1ifSvyb0h6/WNQDNH4rhTTqtTbdSV9zNOq9Hq36PSJRQudmAPigUn4OvtvOZdIaufEO/eb+25vLeOzWfiunhArDKoI3Jt8/6Tr2EcNjMKFN8/C2C8wdabb+pTORVz2V+9Oq9C1zY3ho/8qb8iz2cOX4uV+OnJyXHh5Neo5Aqm1+UqWuQCotY2v42mXx9BadJBzyfE6mRalL9TSN/OLk6D7JtYa35ncDw5z517uUbn0KqhqdIdwI92abaVmldBRoh7yfrN4IhThu7eofX+smNIeB84+r6iSiYFDSyxl1jLDmBHrSDiNjJlUyFWgd44XWz0aT+lSRvxKD9ZKmG6G1c2Bwx7qCr+EZfpMzAREQEREBERATTvK9XycIxX7S06f+8q00PwYzcZz7y5V8vDMv8AiYqgnrs3WfJDA5BwkBc5PM0/8opC2x5k8jIHSOkyE5T+pqVbuoFh1gtY8xY9k6H7Ov2b2mxJKV0H2cQlrbizHl/q7zJVsZTq0cz2OcAFQbnrBuBzJ1uCRexvfW7BqfELEgjbIB6iND8ZsOC4iTg2Q/Zo1V79MhtodvZ7u+ilwqwIZfEDe19pAqU+rWop0DIbeO4I1568tfoE7hGO6vDt3moB/la/yEv8Gx2jB9DmvfXW9u71CYnBP2DTJAvqCdADcG1+V8q6nutpe8k4UMrEupRdLluyNO4nQ+y89PH1wmPjfVnGda2itxWmKJs98qEKoPMklj6ySPgOU0HFG7a9w+Ov1kzGY9DcLte5/aP9P+fAQMxZtt7Df2TPLyzKySSa9eWsruaiiudF+8Z2LoBhG/TsGG0NLhLEje+tNP55yTFYRshY2GViCCbNtuBzE7dw7iNLD42kWKjJwQuwNgW7dJlVSdycjaTrM8fzn8jyf6eS44fn3txnpFfOozXAUASxhiuQIpIdg2e9gp80oF5nQG9+ZHdeU8ZrEu2bcHltrrp4a6eFtpELA2vyUD2i08UenC9I33oHTvRpt+035jNzM5L0arN12HGY5RiEGW5yjMw1ttuZ1oiVpbw3n/wn5rJTGRaejD2j4X+kvsYFLmWnMrYyy5gWKxkKsZLqmQ6xgdc8mtXNw+mPReqv/qMR8CJtE0jyS1b4Sovo4lvcUpn53m7wEREBERAREQE5h5eKl8Pg6fpY7N+GlVH886fOQ+XWt+v4end+kVD7OpUH4tA4niaNU53UZkLMxyMr5VLFhnVSSvtAlOB4kaTh1AvlKkEbqdxcaj1/TSQlFwL/ABmUHC6lEU61WkrU3YBSWR6bZlJsTTa6tbW2hFoGVo9JabaOjL4izAeJGh9wv6+cTjHEabjJT7Q0JYgixt9kHXmRcj+pw7YR1C50dcygqSp7QOxBkzBcHrVWyU07WXMcxRLAmwJNQgak2AvrAto1/tBNDa4JuQtwNL2ubC/jrLK0SWIY6jMN9iL21PK86BR6C0VVOvqEFT2goC5ybc6uTMBb7Bbc+qXeI8MwdAB6dA1btqesqXJNzewFNteYuQL85i5RZGljhFg3aVyGTqypBpVgzWNmBuNORAOuoBk9uHVcOC9Wn1YqKaQQoc1mW5KdZfXs3z307xe03AcfTDYN3OGCVmo5CyOKYLtmAcLTUMSAw89j5nfrNAopUxDKKWjsMjhid1Hnk8+yBvzlm73W3XZYxTguSabMtgjF79ljuSyaZgP+e+XU6TdnSiC/U9Uz1HaqCuXISqVLhCRc87Em1rkSZjujmRQC7NzOul+ZA8ZGpYGkqOxS7KDbNqPWV2PtmmMpL3YJqBYZwed2uAAL7aje/qE8o0hchzlGU68r7jWT8RiiEdVVAjVM+iKXB1soqEZggv5oNpCfEg7Ll7IG5N2AAJ17zc25Xkm11E/ovUHX0v8ATU/zidgM4rwmtatS0t+up/B1M7S0osk9ofeP5Wl1jLFU6g/tfMEfWVMYBjLLmVM0tM0C1UMiVjJFQyJWMDoXkeraYlO5qTfiDg/kE6POU+SGtbE1k9KgG/A4H886tAREQEREBERAThvlyxP/APfSX/D4a9T2u9T/AOr4zuU+evLPXzcSxP7GBpJ+IOf/AHBA5aBJfDQmftoGASq1rlb5abNYka27PxkWT+Ef2gzGw6qta+xLU2TT2ke6KJ4wVUgK5e6hVszkMtt0CjYcrG1pP4H0fam61c5Uq97AC58M249+sYFgNWIHrMk1elVBOyodraaAW9940M+ptt8NL+u28AzVMR0vttSt95jf3WEw/EOk2IqDLcIL/wB3cE+Ga941IN9xaowCvaxIOptqDe/wmC4Y1PC4lzUYBaiMcxOl7grr75pq4gnz2Ym999/XMzVfrsMut2Tsn1jb3i3vlGxcQ6V4ceZYkG+mo58wCOfM8prWL4sagbq00OjE20HK3a9cwgpnuO/qk3D4VwLq2hOwPv0G0CNVqE6EG3qMsTLPg2ynrahVb6k3IzWYqMq73sR7ZAXCkmwGvO+g9kDzCG1RD+8U/ETuDGcNw4JItvmHzE7cXvrILWJP5l/MIZpRijp/En5llDNA9ZpaZoZpbZoFNQyJWMkOZDrGBtHktrZeIKPTo1F/K/8AJO0TgnQOvl4jhj+8Zfx03T+ad7gIiICIiAiIgJ8y+VStm4hxFv3tFPwpQW3wM+mp8n9OMQWxGObfPxSqP4VeoF+CLA1cmXKZtcnXsgmxsbZ1BF+Rt85ZMk4RiGBUZjmp2W3nNmDBbc/NtA2hqfC6w0qdX/EyEerrNPcJ5/8AqVN7NQxIPdcI4PrZT9JexPGcKTbE4N0vuXor89DLCrwmoeyerI7jUT4nSQY3i3RytRTrHZXXMAct7jMbA6rtcj3zCU6Nxf8A5M2Lj+DorSDUsW9RetUZGqZxs2otsQO8fS+IwoAQFmAuNu1c7i9gLW/pKKEwbWJYhQAD36EXG3rl3h9YISC2jAAjuPf8ZbwlJCwDkgW300PISYuCU2Ubs1l12Fxe55bqLwLBpgPsN8wvzI+ybcj4TdOAcM63D06mXKDn302dl5/dmrPwPEMoNKm7eGUjTlqZtvAuG1mp2xNAK66KxKHMO+wJsfnKMV0spoKfVUijksrNlYFgVDZVUDe+bXmNNN7QcBw4khiCVKjUqd7725Heb/Q4YqbWG1gLad/KXKuCVhYk7g6abSDlPB8W1FaiZN2S+YeidQVI1+h1nVaVgqgclA+Exy9GcKCWKFizFjmZtzqdARMmEAFgNoGN4ximXIqAdpu0TsqqCx9ptYeuXy0r4kf1VT/Rt8jIxaBUzS2zTxmltmgHMi1zLztIlZoEjgFfJi8M3diqN/V1i3+F59IT5bqVynbG6kMPWuo+U+o0a4BGxF4HsREBERAREQE+OuMYnrENT/ExVSp7yzfzz674rX6uhVf0aLt+FSfpPmPC8OpZVUopA2zDNa9r7+oQNKBma4Xw+rkNWkrh0r0cgymxGWqXY6XtdUHd27HcTc8NTVfNUD1AD5SajQMVhcfjj52FT19aEHuIJmSGEWoP1tGlc73s/wASsvBpcBgYjG9E8NUAsgpnNclBYka6dwGvwlVDohhQoUh2sb6uQT+G0zAaVBoETD8AwiWy0KemxYZiPa15kqSqvmgD1AD5S0GnoaBIzzwtLOaM0C6WnmaWi08LQLhaWy0pLSktAoxwvScd9NvymQFe4En1dVI/ZPymGwz3Rfuj5CBILShmlJaW2aB67SLWaXGaRqzQI9fUGfTPRzEdZhMPU9PDUm/Ein6z5kcz6H8m9fPwzCHuo5P92TT/AJYGyxEQEREBERAwnTepl4fiz34Wqv4kK/WfP1EzuXlRrZOGYg9/VL+KtTU/AmcKowMjSMkoZCpGSUMCQDLgMsBpWGgXgZ7eWg09zQLoaVZpYzT3NAvZozSzmjNAu5p4WlvNPC0C4WlJaUFp4WgV3mBwTfq0+4vyEzYaa/hm7IHdp7tIEstLbtPC0oLQIIxjWucu2x05gd+2sqDkjW17kaeBtLrqvcPcJZfTaBbad28jVbNwymvoVqy++oz/AM84OTOyeQetfCYhCfNxhI8A1Kl9VMDpkREBERAREQNG8sdbLw/L6eIpL7rv/JOL0TOteXJz+iUbA5RiszGxsoWlUF2PIXbnOQK2XzgVHeRYH3wMjSMkK0x1PEr6S+8SQuIX0l94gTQ0rDSGMQvpD3iVCuO8e8QJYae5pFFcd494nvXDvHvgSc0ZpG60d4nvWjvgSc0ZpG60d8daO+BJzTwvI/WDvnnWjvgSM08zSx1kdZAv55gKDb/ff87TLGpMHTbVv9I/5zAllpQWlo1JSakCstLVQzwvLbE90CkmdX8gdf8A7ZT7jQf8XWqfyicvbhuI0/UVtSAP1VTUnYDTUnunTfIlw3E0MRiOvw9akr0EsatKpTBKsdAWAubOYHX4iICIiAiIgJo/ljpX4azehXpN726v+ebxLGNwlOsjU6qK6MLMrC4PPb16wPlxa4C7b7SvyX9GRxDHrRq3NFEepWszKcoGVQGHMuyd2gbundanku4Uf7hxpbTEYj61JlejHRDB8PD/AKJSyF7ZmLM7tbYZmJNvDaBgk8knCR/c1D/tFf6PLp8lnDOVKoP9fWPzYzdYgaFW8knDm/xx6qx+okZvI3gCQeuxdhyFZQD67Jf4zo0QPkHpXg6mDxlfDsaqhK9QU87MC9IOwpuL7gqAb8550WwdXGYuhhlqP+srKrEMxKpe9RrA8lDH2T67qUFbzlU+sA/OUUcHTQ3SminvVVB+AgajS8lfCxvSqt97E4n6VBJSeTnhY2w3vq1z83m1xA0zi/QDAjD1+ow6rUNB8hLOxVwpKkZmNtQJw4IpGk+pJwXpf0OxlPF1jRw1SpTaq9RDSUsoV2LBbDUEXta3KBqZQeMw/EK5VyASBYc/bNhq8Lxa+dgsYP8AZa9vfkmPXopjsXW6ujha4L3AapSqU0WyknM7qAu3vtA770N6K4T9AwprYWg9Q4Wk1Rno02ZnZAzEsRcm5MnnoPw2xH6HQFzc2QA3vfcazPUKQRVUbKoUeoCwlcDDHongMpUYTDgFStxRphrEW8617+M+TOPYOthcTWw1R2LUqrUybtZspsGAvsRY+2fZk1fj3k94Zjapr4rDB6pUAsKlZLgbXCOAT42vA+S+ub0m95nVvIpwelicUor0kqrTwz1LVFDqHLIFNmG/aJ9k6WfI/wAG/wC6kf6/Ef8Azmw9G+iuDwCsuDoinmPaJZ3Y7aZnJIGmwNoGaiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiB//Z'
width="80%"></img>
</td>
<td>
<br> <span class='product '>GGPC Legend</span>
<button class="item-btn" onclick="removeItem4()">X</button>
<br>RTX 2070 SUPER Gaming PC<br>
<li class='product description'>CPU: AMD Ryzen 7</li>
<li class='product description'>GPU: Nvidia RTX 2070 Super</li>
<li class='product description'>Memory: 16GB</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$2,413.85 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider '></div>
<div class="cost-sum-headers">
<span style='float:left; '>
<div class='total-font'>
Subtotal
</div>
<div class='total-font '>
GST
</div>
<div class='total-font '>
Delivery
</div>
TOTAL
</span>
<span class="cost_sum">
<div class='total-font '>$2,753.35</div>
<div class='total-font '>$398.16</div>
<div class='total-font '>$26.97</div>
<div class="total-font">$3,172.11</div>
</span>
<button class='checkout-button'>Checkout</button>
</div>
</div>
</div>
</div>
</div>
</main>
<style>
body {
background-color: #424242;
}
.icon-container {
text-align: center;
}
.fa,
.fab {
font-size: 3.125em;
}
.fa-heart {
color: #ddd !important;
}
.fa-cc-apple-pay {
background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-mastercard {
background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-visa {
background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-paypal {
background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-amazon-pay {
background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-google-pay {
background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.order-info-content .fa-shopping-cart {
color: #212121;
}
/* Main body of checkout section */
.checkout-tabs {
height: 59em;
width: 75.000em;
background: #fff;
display: flex;
border-radius: 2.063em;
}
@media only screen and (max-width: 700px) {
.checkout-tabs {
height: 62em;
}
}
/*
========================================================================================================
Payment Form
========================================================================================================
*/
.payment-form h2 {
margin-bottom: 0em;
margin-top: 1.563em;
text-align: center;
font-weight: 200;
font-size: 1.2em;
}
.order-info-content h2 {
margin-bottom: 0em;
text-align: center;
font-weight: 500;
font-size: 1.5em;
color: #212121;
}
.payment-form label {
margin-bottom: 0.625em;
display: block;
color: #ddd;
}
.payment-form {
justify-content: center;
align-items: center;
display: flex;
}
.order-table .product-name {
font-weight: 500;
}
.order-table .description {
font-weight: 200;
font-size: 0.750em;
font-size: .8em;
list-style-type: none;
}
.half-input-table {
border-collapse: collapse;
width: 100%;
}
.half-input-table td:first-of-type {
border-right: 0.625em solid #212121;
width: 50%;
}
.order-info {
height: 100%;
width: 50%;
padding-left: 1.563em;
padding-right: 1.563em;
position: relative;
}
.price {
bottom: 0em;
position: absolute;
right: 0em;
color: #21212180;
}
.order-table td:first-of-type {
width: 25%;
}
.order-table {
position: relative;
}
.devider {
height: 0.063em;
width: 100%;
margin-top: 0.625em;
margin-bottom: 0.625em;
background: #21212185;
}
.cost_sum {
float: right;
text-align: right;
}
.total-field {
width: 50%;
margin-bottom: 20px;
}
.quantity {
width: 10%;
margin-left: 5px;
float: right;
}
.price-right {
float: right;
}
.checkout-button {
border: solid;
border-color: rgba(221, 221, 221, 0.281);
background: rgb(53, 53, 53);
padding: 0.7em;
border-radius: 1.250em;
font-size: 1.250em;
color: rgb(255, 255, 255);
cursor: pointer;
width: 100%;
}
.checkout-button:hover {
opacity: 95%;
}
.total-font {
line-height: 1.2em;
font-size: 1.000em;
font-size: 1em;
font-weight: 400;
}
.input-field {
background: #ddd;
margin-bottom: 0.625em;
margin-top: 0.188em;
line-height: 1.5em;
font-size: 1.250em;
font-size: 1.3em;
border: none;
border-radius: 0.313em;
padding: 0.313em 0.625em 0.313em 0.625em;
color: #fff;
box-sizing: border-box;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.details-field {
background: #212121;
height: 100%;
width: 50%;
color: #eee;
justify-content: center;
font-size: 0.875em;
font-size: .9em;
box-sizing: border-box;
padding-left: 1.563em;
padding-right: 1.563em;
border-radius: 1.875em;
border-style: solid;
border-color: white;
}
.details-inputs {
margin-top: 1.563em;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.details-inputs h3 {
text-align: center;
padding: 0em;
margin-top: 0em;
font-size: large;
}
.item-btn {
color: red;
background-color: transparent;
border-style: none;
float: right;
}
.item-btn:hover {
cursor: pointer;
}
.checkout-form-1 {
height: 300px;
width: 400px;
margin: 20px auto;
border: 2px solid black;
text-align: center;
background-color: white;
}
</style>回答1:
you can use querySelectorAll
for example:
// Get all the elements that have the `.price` class
const prices = document.querySelectorAll(".price");
Then you could loop over prices use array.reduce()
// convert the nodeList into an array and loop over it
let total = [...prices].reduce((acc, price) => {
return acc + parseFloat(price.innerHTML);
}, 0);
This would however require you to edit the HTML
From
<div class='price'>$429.00 (GST Inc)</div>
To something like -
<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>
or you could use a regular expression on the price.innerHTML
回答2:
You do NOT need an ID since IDs need to be unique.
I do not have your delivery on the page so here is the total
Note: You HTML is quite invalid. You cannot have divs in spans. Also I would have the style sheet external and placed in the beginning of the head
const prices = [...document.querySelectorAll(".order-info .price")]
.map(price => +price.textContent.replace(/[^\d|.]/g, "")) // get rid of text and $
const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // sum the array of prices - if none, then 0
console.log(sum.toFixed(2)); // sum of prices
const costs = [...document.querySelectorAll(".cost_sum div")];
const total = costs.length > 0 ? costs.reduce((acc, cost) => {
acc += +cost.textContent.replace(/[^\d|.]/g, "");
return acc;
}, 0) : 0;
console.log(total.toFixed(2))body {
background-color: #424242;
}
.icon-container {
text-align: center;
}
.fa,
.fab {
font-size: 3.125em;
}
.fa-heart {
color: #ddd !important;
}
.fa-cc-apple-pay {
background: -webkit-linear-gradient(45deg, rgb(119, 119, 119), rgb(255, 255, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-mastercard {
background: -webkit-linear-gradient(0deg, #ffef00, #ff6f00, #ff0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-visa {
background: -webkit-linear-gradient(90deg, rgb(255, 255, 0), rgb(255, 255, 255), rgb(35, 38, 250));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-paypal {
background: -webkit-linear-gradient(45deg, rgb(0, 4, 255), rgb(0, 225, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-cc-amazon-pay {
background: -webkit-linear-gradient(45deg, rgb(255, 138, 4), rgb(255, 174, 0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fa-google-pay {
background: -webkit-linear-gradient(0deg, rgb(255, 0, 0), rgb(241, 147, 40), rgb(5, 206, 22), rgb(0, 174, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.order-info-content .fa-shopping-cart {
color: #212121;
}
/* Main body of checkout section */
.checkout-tabs {
height: 59em;
width: 75.000em;
background: #fff;
display: flex;
border-radius: 2.063em;
}
@media only screen and (max-width: 700px) {
.checkout-tabs {
height: 62em;
}
}
/*
========================================================================================================
Payment Form
========================================================================================================
*/
.payment-form h2 {
margin-bottom: 0em;
margin-top: 1.563em;
text-align: center;
font-weight: 200;
font-size: 1.2em;
}
.order-info-content h2 {
margin-bottom: 0em;
text-align: center;
font-weight: 500;
font-size: 1.5em;
color: #212121;
}
.payment-form label {
margin-bottom: 0.625em;
display: block;
color: #ddd;
}
.payment-form {
justify-content: center;
align-items: center;
display: flex;
}
.order-table .product-name {
font-weight: 500;
}
.order-table .description {
font-weight: 200;
font-size: 0.750em;
font-size: .8em;
list-style-type: none;
}
.half-input-table {
border-collapse: collapse;
width: 100%;
}
.half-input-table td:first-of-type {
border-right: 0.625em solid #212121;
width: 50%;
}
.order-info {
height: 100%;
width: 50%;
padding-left: 1.563em;
padding-right: 1.563em;
position: relative;
}
.price {
bottom: 0em;
position: absolute;
right: 0em;
color: #21212180;
}
.order-table td:first-of-type {
width: 25%;
}
.order-table {
position: relative;
}
.devider {
height: 0.063em;
width: 100%;
margin-top: 0.625em;
margin-bottom: 0.625em;
background: #21212185;
}
.cost_sum {
float: right;
text-align: right;
}
.total-field {
width: 50%;
margin-bottom: 20px;
}
.quantity {
width: 10%;
margin-left: 5px;
float: right;
}
.price-right {
float: right;
}
.checkout-button {
border: solid;
border-color: rgba(221, 221, 221, 0.281);
background: rgb(53, 53, 53);
padding: 0.7em;
border-radius: 1.250em;
font-size: 1.250em;
color: rgb(255, 255, 255);
cursor: pointer;
width: 100%;
}
.checkout-button:hover {
opacity: 95%;
}
.total-font {
line-height: 1.2em;
font-size: 1.000em;
font-size: 1em;
font-weight: 400;
}
.input-field {
background: #ddd;
margin-bottom: 0.625em;
margin-top: 0.188em;
line-height: 1.5em;
font-size: 1.250em;
font-size: 1.3em;
border: none;
border-radius: 0.313em;
padding: 0.313em 0.625em 0.313em 0.625em;
color: #fff;
box-sizing: border-box;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.details-field {
background: #212121;
height: 100%;
width: 50%;
color: #eee;
justify-content: center;
font-size: 0.875em;
font-size: .9em;
box-sizing: border-box;
padding-left: 1.563em;
padding-right: 1.563em;
border-radius: 1.875em;
border-style: solid;
border-color: white;
}
.details-inputs {
margin-top: 1.563em;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.details-inputs h3 {
text-align: center;
padding: 0em;
margin-top: 0em;
font-size: large;
}
.item-btn {
color: red;
background-color: transparent;
border-style: none;
float: right;
}
.item-btn:hover {
cursor: pointer;
}
.checkout-form-1 {
height: 300px;
width: 400px;
margin: 20px auto;
border: 2px solid black;
text-align: center;
background-color: white;
}<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
<div class='payment-form'>
<div class='checkout-tabs'>
<div class='order-info'>
<div class='order-info-content'>
<h2>Cart <i class="fa fa-shopping-cart"></i></h2>
<div class='devider'></div>
<table class='order-table' id="checkout-itm-1">
<tbody>
<tr>
<td><img src='https://aoc-pim.s3.amazonaws.com/USA%20content/g2/CQ27G2/CQ27G2_F.png' width="100%">
</td>
<td>
<br>
<span class='product-name'>AOC C27G2</span>
<button class="item-btn" onclick="removeItem1()">X</button>
<br>27" Full HD Curved Monitor<br>
<li class='product description'>Resolution: 1920x1080</li>
<li class='product description'>Refresh Rate: 165hz</li>
<li class='product description'>Response Time: 1 ms</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$429.00 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev1"></div>
<table class='order-table' id="checkout-itm-2">
<tbody>
<tr>
<td><img src='https://www.computerlounge.co.nz/data/media/images/catalogue/Products2/Peripherals/Mice/Logitech/22752_1.jpg?maxheight=950&maxwidth=600&quality=100&404=default.jpg' width="100%">
</td>
<td>
<br> <span class='product-name'>Logitech G402 Hyperion Fury</span>
<button class="item-btn" onclick="removeItem2()">X</button>
<br>Gaming Mouse<br>
<li class='product description'>Movement Detection: Optical</li>
<li class='product description'>Programmable Buttons: 8</li>
<li class='product description'>Hand Orientation: Right Hand</li>
<li class='product description'>Maximum DPI: 4,000</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$94.89 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev2"></div>
<table class='order-table' id="checkout-itm-3">
<tbody>
<tr>
<td><img src='https://www.pbtech.co.nz/imgprod/H/S/HSTLOG4443629__1.jpg?h=1434805038' width="90%">
</td>
<td>
<br> <span class='product-name'>Logitech G332</span>
<button class="item-btn" onclick="removeItem3()">X</button>
<br>Stereo Gaming Headset<br>
<li class='product description'>Sound Mode: Stereo</li>
<li class='product description'>Microphone: Yes</li>
<li class='product description'>Interface: 3.5mm</li>
<li class='product description'>Colour: Black</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$133.00 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider' id="dev3"></div>
<table class='order-table' id="checkout-itm-4">
<tbody>
<tr>
<td>
<img src='https://www.pbtech.co.nz/imgprod/W/K/WKSGGPC50042__10.jpg' width="80%">
</td>
<td>
<br> <span class='product '>GGPC Legend</span>
<button class="item-btn" onclick="removeItem4()">X</button>
<br>RTX 2070 SUPER Gaming PC<br>
<li class='product description'>CPU: AMD Ryzen 7</li>
<li class='product description'>GPU: Nvidia RTX 2070 Super</li>
<li class='product description'>Memory: 16GB</li>
</td>
</tr>
<tr>
<td>
<div class='price'>$2,413.85 (GST Inc)</div>
</td>
</tr>
</tbody>
</table>
<div class='devider '></div>
<div class="cost-sum-headers">
<div style='float:left; '>
<div class='total-font'>Subtotal</div>
<div class='total-font '>GST</div>
<div class='total-font '>Delivery</div>
TOTAL
</div>
<div class="cost_sum">
<div class='total-font '>$2,753.35</div>
<div class='total-font '>$398.16</div>
<div class='total-font '>$26.97</div>
<div class="total-font">$3,172.11</div>
</div>
<button class='checkout-button'>Checkout</button>
</div>
</div>
</div>
</div>
</div>
</main>来源：https://stackoverflow.com/questions/64568089/calculate-the-total-cost-of-the-products-within-the-shopping-cart-and-displaying