CODEWITHSUNDEEP
javascripthtmlcss
Thomas Dorsey
Thomas Dorsey

Reputation: 15

Why does the function return not defined?

My code returns "not defined" when I press on any of the buttons or type in a function in the console (for example if I press the Roll! button or type Roll() in the console). I don't think the HTML has anything to do with it but it might so I put it in. Here is my code:

<!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>

Upvotes: 0

Views: 684

Answers (4)

m87
m87

Reputation: 4523

You can't return an variable assignment. Instead do it this way

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

Upvotes: 1

Mayank
Mayank

Reputation: 188

DiceNum() is returning 'var Dice = 1' try commenting and see if it runs also, try defining the function as var Roll = function(){.... similar to DiceNum

Upvotes: 0

Amr Aly
Amr Aly

Reputation: 3905

You can not declare the variable so many times your function should look like this:

var DiceNum = function (x) {

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

Upvotes: 0

Ninjabin
Ninjabin

Reputation: 97

There is an error in your DiceNum function:

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;
  }
}

You return var Dice = 1 is not correct syntax in Javascript, try changing it to return Dice = 1(change it in the other places as well)

I hope this helps!

Upvotes: 0

Related Questions