Javascript 为什么函数返回没有定义？_Javascript_Html_Css

Javascript 为什么函数返回没有定义？

javascript html css

Javascript 为什么函数返回没有定义？,javascript,html,css,Javascript,Html,Css,当我按下任何按钮或在控制台中键入函数时（例如，如果我按下滚动键），我的代码返回not defined！控制台中的按钮或类型滚动。我不认为HTML和它有任何关系，但它可能会，所以我把它放进去。这是我的密码： <!DOCTYPE html> <html> <head> <style> .dropbtn { color: black; padding: 4px; font-size: 16px; border: none;

当我按下任何按钮或在控制台中键入函数时（例如，如果我按下滚动键），我的代码返回not defined！控制台中的按钮或类型滚动。我不认为HTML和它有任何关系，但它可能会，所以我把它放进去。这是我的密码：

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    color: black;
    padding: 4px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    min-width: 160px;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: gray;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

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

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>
<img id="Dice1" src="White.png"></img>
<img id="Dice2" src="White.png"></img>
<img id="Dice3" src="White.png"></img>
<p></p>
<div class="dropdown">
<button onclick="Dropdown()" class="dropbtn">Number of Dice</button>
  <div id="myDropdown" class="dropdown-content">
    <button class="dropbtn" onclick="DiceNum(1)">1 Dice</button>
    <button class="dropbtn" onclick="DiceNum(2)">2 Die</button>
    <button class="dropbtn" onclick="DiceNum(3)">3 Die</button>
  </div>
</div>
<p></p>
<button class="dropbtn" onclick="Roll()">Roll!</button>
<script>
    var Dice = 1;
    function Dropdown() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    var openDropdown
    window.onclick = function(event) {
        if (!event.target.matches(".dropbtn")) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i += 1) {
                openDropdown = dropdowns[i];
                if (openDropdown.classList.contains("show")) {
                    openDropdown.classList.remove("show");
                }
            }
        }
    }
    var randNum1 = Math.floor((Math.random() * 6) + 1);
    var randNum2 = Math.floor((Math.random() * 6) + 1);
    var randNum3 = Math.floor((Math.random() * 6) + 1);
    function Roll() {
        if(Dice===1) {
            randNum1 = Math.floor((Math.random() * 6) + 1);
            document.getElementById("Dice1").src = "Dice"+randNum1+".png";
            document.getElementById("Dice2").src = "White.png";
            document.getElementById("Dice3").src = "White.png";
        } else if(Dice===2) {
            randNum1 = Math.floor((Math.random() * 6) + 1);
            randNum2 = Math.floor((Math.random() * 6) + 1);
            document.getElementById("Dice1").src = "Dice"+randNum1+".png";
            document.getElementById("Dice2").src = "Dice"+randNum2+".png";
            document.getElementById("Dice3").src = "White.png";
        } else if(Dice===3) {
            randNum1 = Math.floor((Math.random() * 6) + 1);
            randNum2 = Math.floor((Math.random() * 6) + 1);
            randNum3 = Math.floor((Math.random() * 6) + 1);
            document.getElementById("Dice1").src = "Dice"+randNum1+".png";
            document.getElementById("Dice2").src = "Dice"+randNum2+".png";
            document.getElementById("Dice3").src = "Dice"+randNum3+".png";
        }
    }

    var DiceNum = function (x) {
    if(x===1) {
            return var Dice = 1;
        } else if(x===2) {
            return var Dice = 2;
        } else if(x===3) {
            return var Dice = 3;
        }
    }
</script>
</body>
</html>

DiceNum函数中存在错误：

var DiceNum = function (x) {
  if(x===1) {
    return var Dice = 1;
  } else if(x===2) {
    return var Dice = 2;
  } else if(x===3) {
   return var Dice = 3;
  }
}

如果返回var Dice=1在Javascript中的语法不正确，请尝试将其更改为返回Dice=1，并在其他位置进行更改

我希望这有帮助

不能多次声明变量，函数应如下所示：

var DiceNum = function (x) {

if(x===1) {
        return  Dice = 1;
    } else if(x===2) {
        return  Dice = 2;
    } else if(x===3) {
        return  Dice = 3;
    }
}

DiceNum正在返回'var Dice=1'，请尝试注释，看看它是否也运行，尝试将函数定义为var Roll=function{….类似于DiceNum，您不能返回变量赋值，而是这样做

var DiceNum = function(x) {
    if (x === 1) {
        Dice = 1;
    } else if (x === 2) {
        Dice = 2;
    } else if (x === 3) {
        Dice = 3;
    }
}

将脚本放在标题部分为什么他要这样做？最好的做法是将脚本放在结束正文标记之前。