JavaScript如何将导航子菜单按钮关联至对应函数？

别担心，这个问题其实很直接——你只需要把onClick事件属性直接添加到对应的<a>标签里就行，和你参考代码里的<input>按钮用法本质是一样的。下面我一步步给你讲怎么改：

1. 修改顶部导航的Roll和Exit按钮 #

把原来的两个链接直接加上对应的点击事件：

<a href="#roll" onClick="rollDice()">Roll</a>
<a href="#exit" onClick="quit()">Exit</a>

这里rollDice()和quit()就是你参考代码里已经写好的函数，直接绑定就行。

2. 修改下拉菜单的三个功能按钮 #

同样给每个下拉菜单的<a>标签添加对应的onClick属性：

<div class="dropdown-content" id="myDropdown">
  <a href="#" onClick="promoteDice()">Add a side to your Dice</a>
  <a href="#" onClick="demoteDice()">Remove a side to your Dice</a>
  <a href="#" onClick="addRoll()">Add an additional Roll</a>
</div>

注意：你提到的promoteDice()、demoteDice()、addRoll()这三个函数需要确保已经定义好（参考代码里只有upgradeDice()，我已经帮你基于它扩展出了对应的实现）。

3. 整合所有函数到菜单代码中 #

把你参考代码里的JavaScript函数（包括自定义的三个）放到菜单代码的<script>标签里，和现有的myFunction()等代码放在一起。我帮你整合了一份完整的示例，还修正了参考代码里的小bug（比如didIwin()里的playerscore应该是myscore）：

<!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" onClick="rollDice()">Roll</a> 
<a href="#exit" onClick="quit()">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="promoteDice()">Add a side to your Dice</a> 
<a href="#" onClick="demoteDice()">Remove a side to your Dice</a> 
<a href="#" onClick="addRoll()">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 myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 
// 点击外部关闭下拉菜单
window.onclick = function(e) { 
if (!e.target.matches('.dropbtn')) { 
var myDropdown = document.getElementById("myDropdown"); 
if (myDropdown.classList.contains('show')) { 
myDropdown.classList.remove('show'); 
} 
} 
} 

/* 骰子游戏核心函数 */
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 (myscore >= 100) { 
alert ("Congratulations you won the game!"); 
} 
// 重置分数和骰子面数（你可以根据需求调整是否需要重置）
myscore = 0; 
housescore = 0; 
dicesides = 6; 
} 

// 自定义的promoteDice函数（对应Add a side）
function promoteDice() { 
if (myscore >= 10) { 
dicesides += 1; 
alert ("Your Dice now have " + dicesides + " sides"); 
} else { 
difference = 10 - myscore; 
alert ("You need "+difference+" more points"); 
} 
} 

// 自定义的demoteDice函数（对应Remove a side）
function demoteDice() { 
if (dicesides > 6) { // 确保骰子面数不低于6
dicesides -= 1; 
alert ("Your Dice now have " + dicesides + " sides"); 
} else { 
alert ("Dice can't have fewer than 6 sides!"); 
} 
} 

// 自定义的addRoll函数（对应Add an additional Roll）
function addRoll() { 
// 这里可以实现额外掷骰子的逻辑，比如多掷一次并计算分数
var x = Math.floor(Math.random() * dicesides) + 1; 
msg = "You got an extra roll: " + x + "\n"; 
if (x % 2 == 0) { 
myscore += 5; 
msg += "You gained 5 points!"; 
} else { 
housescore += 5; 
msg += "House gained 5 points!"; 
} 
msg += " Your Score is " + "Player: " + myscore + ", House: " + housescore; 
alert(msg); 
didIwin(); 
} 

function quit() { 
alert (" Your Score is " + "Player: " + myscore + ", House: " + housescore); 
myscore = 0; 
housescore = 0; 
dicesides = 6; 
} 
</script> 
</body> 
</html>

关键说明： #

• 所有的onClick事件都是直接绑定在<a>标签上，和按钮的绑定方式完全一致；
• 我帮你补充了promoteDice、demoteDice、addRoll三个函数的实现，你可以根据自己的需求调整逻辑；
• 注意参考代码里didIwin()函数的playerscore是个笔误，我改成了myscore，避免报错。

内容的提问来源于stack exchange，提问作者Jon Frank