only final output is being displayed-CodePudding

I'm trying to make a program to roll three random dice with n number of sides (determined by user input), and then continue rolling the dice and showing the random numbers until all three numbers are the same.

I think my logic is fine, but the page only shows the final row where all the numbers are the same and not the ones prior to it (where they are not all the same).

{
  let sidesNumber = parseInt(prompt("Enter the number of sides for your dice:", ""));

   let output1 = -1;
   let output2 = -2;
   let output3 = -3;

   while( output1 != output2 || output1 != output3 )
   {
       output1 = Math.floor((Math.random()* sidesNumber   1));
       output2 = Math.floor((Math.random()* sidesNumber   1));
       output3 = Math.floor((Math.random()* sidesNumber   1));
       document.getElementById("result").innerHTML = output1   " "   output2   " "   output3;
   }
}

CodePudding user response：

The reason this is happening is you are not appending output1, output2, and output3 the Math.floor((Math.random()* sidesNumber 1)), you are redefining the whole variable.

For example,


   let output1 = -1;
   let output2 = -2;
   let output3 = -3;
   output1 = Math.floor((Math.random()* sidesNumber   1));
   output2 = Math.floor((Math.random()* sidesNumber   1));
   output3 = Math.floor((Math.random()* sidesNumber   1));

The output varaible is -1, -2, etc.

So to append the variables as Math.floor((Math.random()* sidesNumber 1)), use = instead of =.

I've also realized document.getElementById("result").innerHTML = should be document.getElementById("result").innerHTML =. I fixed that too.

{
  let sidesNumber = parseInt(prompt("Enter the number of sides for your dice:", ""));

   let output1 = -1;
   let output2 = -2;
   let output3 = -3;

   while( output1 != output2 || output1 != output3 )
   {
       output1  = Math.floor((Math.random()* sidesNumber   1));
       output2  = Math.floor((Math.random()* sidesNumber   1));
       output3  = Math.floor((Math.random()* sidesNumber   1));
       document.getElementById("result").innerHTML  = output1   " "   output2   " "   output3;
   }
}

CodePudding user response：

You're very almost there.

Currently, instead of displaying each roll on the screen, your script rolls the dice invisibly in the background and the roll is displayed only when the desired result occurs.

To display each roll, swap the line:

document.getElementById("result").innerHTML = output1   " "   output2   " "   output3;

for something like:

document.body.innerHTML  = '<p>'   output1   " "   output2   " "   output3   '</p>';

Working Example:

{
  let sidesNumber = parseInt(prompt("Enter the number of sides for your dice:", ""));

   let output1 = -1;
   let output2 = -2;
   let output3 = -3;

   while( output1 != output2 || output1 != output3 )
   {
       output1 = Math.floor((Math.random()* sidesNumber   1));
       output2 = Math.floor((Math.random()* sidesNumber   1));
       output3 = Math.floor((Math.random()* sidesNumber   1));
       document.body.innerHTML  = '<p>'   output1   " "   output2   " "   output3   '</p>';
   }
}

CodePudding user response：

Here is a working example storing the values inside a ul element

{
  let sidesNumber = parseInt(prompt("Enter the number of sides for your dice:", ""));

   let output1 = -1;
   let output2 = -2;
   let output3 = -3;

   while( output1 != output2 || output1 != output3 )
   {
       output1 = Math.floor((Math.random()* sidesNumber   1));
       output2 = Math.floor((Math.random()* sidesNumber   1));
       output3 = Math.floor((Math.random()* sidesNumber   1));
       
       document.getElementById("result").innerHTML  = "<li>"   output1   " "   output2   " "   output3   "</li>";
   }
   

}

<ul id="result"></ul>

CodePudding user response：

Note that every time you run your code you override the value of the innerHTML with =, you just have to fix it by writing =

   document.getElementById("result").innerHTML  = output1   " "   output2   " "   output3;

CodePudding user response：

Your logic is fine, but when you set document.getElementById("result").innerHTML = output1 " " output2 " " output3; you are setting the entire content to the current output (thus eliminating the previews content.

You have to use = instead of =, so the current result are concatenated at the end. Also it helps to add some line breaks so its more readable

This is the finished result:

{
  let sidesNumber = parseInt(prompt("Enter the number of sides for your dice:", ""));

   let output1 = -1;
   let output2 = -2;
   let output3 = -3;
   document.getElementById("result").innerHTML = ''; // resets the result in case of previews runs
   while( output1 != output2 || output1 != output3 )
   {
       output1 = Math.floor((Math.random()* sidesNumber   1));
       output2 = Math.floor((Math.random()* sidesNumber   1));
       output3 = Math.floor((Math.random()* sidesNumber   1));
       document.getElementById("result").innerHTML  = output1   " "   output2   " "   output3   "<br />"; // appends the current result at the end
   }
}