html/ javascript shop

Question

Im new to drop down menus. How can I make a working shop in html/javascript. I have this so far http://prntscr.com/o15oj7 . I want help with the selling of a material part. i know i should use if statements but im not sure how to format the function . I want if bronze is selected for how much you can sell it for to be displayed. then if u press sell button you gain that much gold then lose 1 bronze.

var goldcoins = 0;
var goldcoins = 0;
var Bronzeprice = 10;
var Silverprice = 20;
var GoldPrice = 50;
var DiamondPrice = 100;
var ShrimpPrice = 10;
var BassPrice = 20;
var SalmonPrice = 50;
var SharkPrice = 100;


function sellItem(){
    var mylist=document.getElementById("myList");document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;}

Html code:

   </style>
                   <font size="+2"><b>Shop</b>
                       <br />
                      <font size="+0"> Auto Miner <button 
onclick="buyMiner()" 
    id="MinerCostBtn" >Buy</button>
                    <br />
                  <font size="+0"> Auto Fisher <button onclick="buyFisher()" id="FisherCostBtn" >Buy</button>
                <br />
                <br />
                <form>
                Sell:
                <select id"SellBox" >
                    <option> Bronze </option>
                    <option> Silver </option>
                    <option> Gold </option>
                    <option> Diamond </option>
                    <option> Shrimp </option>
                    <option> Bass </option>
                    <option> Salmon </option>
                    <option> Shark </option>
                    </select>
                    For:&nbsp;<span id="currentPrice">0</span> &nbsp;<button onclick="SellItem()" id="SellBtn" >Sell</button>

                  </form>
                  <br />
                  Gold Coins: <span id="goldcoins">0</span>
                  <br />
                  Buy skillpoint 100,000 gold <button onclick="buySkillPoint()" id="SkillPointBtn" >Buy</button>
                  <br />
                  Buy diamond 10,000 gold <button onclick="buyDiamond()" id="diamonddBtn" >Buy</button>
                  <br />
                  Buy shark 10,000 gold <button onclick="buyShark()" id="sharkkBtn" >Buy</button>
                  <br />
                  <br />
                  <br />

I expect when bronze is selected (etc) for how much you will gain from it to be displayed then when button is pressed for you to lose 1 bronze and gain that amount of gold. While the drop down menu is on that item. I have the variables on a diffrent javascript . i do that all those drop down button items . I just need to know how to format the funtion so if they are selected in the drop down menu that item will sell.

Answer 1

To add onto @Xesenix's answer you probably want to make this generate it's own list, without you having to update the drop-down list each time. You do this by creating the drop-down through javascript.

let goldCoins = 0;
let selectedPrice = 0;

const itemPrices = {
  bronze: 10,
  silver: 20,
  gold: 50,
  diamond: 100,
  shrimp: 10,
  bass: 20,
  salmon: 50,
  shark: 100,
  // I added this value
  Chicken: 9000
};

// We'll simply get a ref to the select element (or you can create it from here as well if you like)
let itemSelector = document.getElementById('item');

// Now create the option elements
for (let item in itemPrices) {
  // Quickly checking that this is a property that you created
  if (itemPrices.hasOwnProperty(item)) {
    // Create the element
    let option = document.createElement('option');

    // Set the value
    option.setAttribute('value', item);

    // Capitalize the first letter of the item name
    const itemName = uppercaseFirstLetter(item);

    // And add the inner text
    option.innerHTML = itemName;

    // Now add the element to the itemSelector element
    itemSelector.appendChild(option);
  }
}

// To make sure that the first item's price shows on screen
updateSelection();

function uppercaseFirstLetter(str) {
  // Got this code from here: https://paulund.co.uk/how-to-capitalize-the-first-letter-of-a-string-in-javascript
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const chosenItemDropdown = document.getElementById('item');

function updateSelection() {
  selectedPrice = itemPrices[itemSelector.value]
  updateDisplay(selectedPrice);
}

function sellItem() {
  // Add the sell code stuff here
  goldCoins += selectedPrice;
  document.getElementById('gold').innerText = goldCoins;
}

function updateDisplay(value) {
  document.getElementById('price').innerText = value;
}

Earned: <span id="gold">0</span> Price: <span id="price">0</span>
<select id="item" onchange="updateSelection()">
  <!-- JS will place option elements here -->
</select>
<button onClick="sellItem()">Sell</button>

So now, all you need to do is add a new item to itemPrices and voilà, you have an auto-updating list. Just add a new item to the list and run the snippet!

Answer 2

To read current selected value from select drop down you need to modify is as follow:

Earned: <span id="gold">0</span>
Price: <span id="price">0</span>
<select id="item" onchange="updateSelection()">
  <option value="bronze">Bronze</option>
  <option value="silver">Silver</option>
  <option value="gold">Gold</option>
  <option value="diamond">Diamond</option>
  <option value="shrimp">Shrimp</option>
  <option value="bass">Bass</option>
  <option value="salmon">Salmon</option>
  <option value="shark">Shark</option>
</select>
<button onClick="sellItem()"></button>

And in javascript you can do something like this:

let goldCoins = 0;
let selectedPrice = 0;

const itemPrices = {
  bronze: 10,
  silver: 20,
  gold: 50,
  diamond: 100,
  shrimp: 10,
  bass: 20,
  salmon: 50,
  shark: 100,
}

const chosenItemDropdown = document.getElementById('item');

function updateSelection() {
  selectedPrice = itemPrices[chosenItemDropdown.value] || 0;
  udateDisplay();
}

function sellItem() {
  goldCoins += selectedPrice; // or do whatever else you want with it
  udateDisplay();
}

function udateDisplay() {
  document.getElementById('gold').innerHTML = goldCoins;
  document.getElementById('price').innerHTML = selectedPrice;
}