Search code examples
javascriptbuttonnestedsubmenu

(Javascript) How do I link sub menu buttons to a function?

I am getting close to done with a project, but I am stuck trying to link the buttons to my functions. I edited the menu successfully, but I need the buttons to link to my created functions.

For example when I look at the 

<a href="#">Add a side to your Dice</a>
<a href="#">Remove a side to your Dice</a>
<a href="#">Add an additional Roll</a>

How would I add the functions so they actually do something?

onClick="promoteDice()
onClick="demoteDice()
onClick="addRoll()

Same thing with the tags:

  <a href="#roll">Roll</a>
  <a href="#exit">Exit</a>

I don't see where I am supposed to add the function so it works.

Here's my actual dice game for reference I don't need you to incorporate my script I just needed help with that question please.

<!DOCTYPE html>
<html>
    <body>
    <input type="button" value="Roll The Dice" onClick="rollDice()" />
    <input type="button" value="Upgrade The Dice" onClick="upgradeDice()" />
    <input type="button" value="Quit" onClick="quit()" />
<script>    
var myscore = 0;
var housescore = 0;
var dicesides = 6;
var diceroll = 1

function rollDice() {
  var x = Math.floor(Math.random() * dicesides) + 1;
  var y = Math.floor(Math.random() * dicesides) + 1;

  var total = x + y;
  msg = "You rolled " + x + ", " + y + " = " + total + "\n";
    if (total != 11 && total < 7 && x != y) {
            housescore += 1;
      msg += "Even Up";
        } else if (total != 11 && total > 7 && x != y) {
            myscore += 1;
      msg += "Player Up";
        }
  if (total == 7 || total == 11) {
    housescore += 10;
    msg += "CRAPS";
  } else if (x == y) {
    if (x % 2 == 0) {
      myscore += 10;
      msg += "Even Up";
    } else {
      housescore += 10;
      msg += "Odd Ball";
    }
  }
    msg += " Your Score is " + "Player: " + myscore + ", House: " + housescore;
  alert(msg);
    didIwin();

}
function didIwin() {
    if (housescore >= 100) {
    alert ("Sorry the house won the game!");
    } else if (playerscore >= 100) {
    alert ("Congratulations you won the game!");
    }
    myscore = 0;
    housescore = 0;
    dicesides = 6;
}
function upgradeDice() {
    if (myscore >= 10) {
    dicesides += 1;
    alert ("Your Dice now have " + dicesides + " sides");
    } else {
difference = 10 - myscore;
alert ("You need "+difference+" more points");
    }
}
function quit() {
  alert (" Your Score is " + "Player: " + myscore + ", House: " + housescore);
    myscore = 0;
    housescore = 0;
    dicesides = 6;
    }




</script>
</body>
</html>

Lastly here is the code for the Menu where I want to incorporate the functions:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#roll">Roll</a>
  <a href="#exit">Exit</a>
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Upgrade
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Add a side to your Dice</a>
    <a href="#">Remove a side to your Dice</a>
    <a href="#">Add an additional Roll</a>
  </div>
  </div> 
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>
Solution

  • You can just add the functions the same way that you did in the example before, it doesn't really matter that you are in a submenu or whatever.

    Just add the onclick property and function to the HTML tag that you want to trigger the execution and then you are good to go.

    In my example I added the function myFunc(); to the add side to dice submenu, but you can add any logic and any other thing to the rest of the HTML tags, this was just an example.

    As a side note: The code inside the function myFunc(); can be changed into anything.

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#roll">Roll</a>
  <a href="#exit">Exit</a>
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Upgrade
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#" onclick="myFunc();">Add a side to your Dice</a>
    <a href="#">Remove a side to your Dice</a>
    <a href="#">Add an additional Roll</a>
  </div>
  </div> 
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Click on the "Dropdown" link to see the dropdown menu.</p>

<script>

function myFunc() {
  alert('You clicked a submenu item')
}
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>