Help me with dice roller i'm trying to make

javascript

#1

Hello. I'm trying to make a dice roller codebit. i posted it here because the codebit section won't let me make a new topic. In my codebit, users type the name, modifier, and number of sides on the dice. It was working fine until I added the number of sides feature. Here is my Javascript:

//Object used for a person
function Person(mod,name,dice){
  this.mod=mod;
 this.name=name;
this.dice=dice;
};

//the rolling function
 var roll=function(p){
    var random=Math.floor((Math.random() * p.dice) + 1+p.mod);
      var randomwoutmod=random-p.mod;  
       
     document.write(p.name+" got "+random+" natural roll:"+randomwoutmod+" ");
     
    
      };

var people=[];
function add(mod,name,dice){
  
    people[people.length]=
    {mod: mod,
    name: name,
    dice: dice
    };
    };

function initd(){
     var x = document.getElementById("name").value;
      var y = document.getElementById("mod").value;
      var yy=Number(y);
      var d=document.getElementById("d").value;
      var dd=Number(d);
    add(yy,x,dd);
    roll(people[people.length]);
    };

Here is my HTML

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
<input type="text" id="name" value="name">
<input type="text" id="mod" value="mod">
<input type="text" id="d" value="__ sided dice">
<button onclick="initd">Try it</button>
</head>
<body>

</body>
</html>

#2

If we do not wish to have a default value, only a reminder in the text field, we can use a placeholder attribute:

<input type="text" id="name" placeholder="Name">

All of the HTML should be in the body. It will not render in the head.

<body>
  <input type="text" id="name" value="name">
  <input type="text" id="mod" value="mod">
  <input type="text" id="d" value="__ sided dice">
  <button onclick="initd">Try it</button>
</body>

This could be using your Person() constructor:

function add(mod, name, dice) {
    people.push(new Person(mod, name, dice));
}

#3

I've added this, and it still doesn't work. I've also changed <button onclick="initd">Try it</button> to <button onclick="initd();" type="button">Try it</button> . Still doesn't work. If you would like to see the codebit, here: https://www.codecademy.com/legoguy4492/codebits/nfTRfu


#4

function Person(mod, name, dice) {
    this.mod = mod;
    this.name = name;
    this.dice = dice;
}
function add(mod, name, dice) {
    people.push(new Person(mod, name, dice));
}
function initd() {
    var x = document.getElementById("name").value;
    var y = document.getElementById("mod").value;
    var d = document.getElementById("d").value;
    var yy = Number(y);
    var dd = Number(d);
    add(yy, x, dd);
    roll(people[people.length-1]);   // this is the line that caused the problem
}
var roll = function(p) {
     var random = Math.floor((Math.random() * p.dice) + 1 + p.mod);
     var randomwoutmod = random - p.mod;
     alert(p.name + " got " + random+" natural roll:" + randomwoutmod);
};

var people = [];

#5

That solved it! Thank you!