1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Welcome to Gamedev SE. To help people find and answer your question, you should make the title as specific as possible. Instead of "html/ javascript show" try something like "How do I call a JavaScript function when a dropdown item is selected?" \$\endgroup\$ – User not found Jun 19 at 18:16
1
\$\begingroup\$

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!

\$\endgroup\$
  • \$\begingroup\$ Thanks if i post a question about prntscr.com/o3752n prntscr.com/o3754y could you help me set up so the previous button is disabled on first round killing rates. then after 10 rat kills the next button becomes able to be pushed. then the enemy name and hp would change. i do want a damage stat to but i wont display the monsters damage. im new to this concept so i'm not sure how to make rounds/waves and have a enemy on those waves and have data switch from pressing next and previous. \$\endgroup\$ – tmanrocks994 Jun 18 at 4:43
  • \$\begingroup\$ Yes, I can. Just link the question here. Sorry for the late response, been very busy. \$\endgroup\$ – Kitanga Nday Jun 19 at 3:46
  • \$\begingroup\$ thats ok thanks i made it the other day \$\endgroup\$ – tmanrocks994 Jun 19 at 4:03
  • \$\begingroup\$ gamedev.stackexchange.com/questions/172969/… \$\endgroup\$ – tmanrocks994 Jun 19 at 4:03
  • \$\begingroup\$ i want this and hiding tabs . i have it working for if u stay on the home tab but if u go onto the next tab after unlocking it it reveals all the rest of your tabs. then my game would be basically done. \$\endgroup\$ – tmanrocks994 Jun 19 at 4:04
1
\$\begingroup\$

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;
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.