Random numbers array in html
Question
I am experimenting with JavaScript and I want to display a string of generated random numbers that are stored in an array in the html.
I currently am only able to display one value in the bottom section with .toString()
What I want is for each time generate is pressed the new value is added to the array and the full array printed as a list underneath.
<!DOCTYPE html>
<html>
<body bgcolor="#000000">
<font size="30" color="orange">Hex Value :- <strong><p align="center"><font size="80" color="orange"><span id="first"></span></p></strong>
<p align="center"><button onclick="incremente()">Generate</button></p>
<font size="3" color="green">Values generated this session:- <strong><p align="center"><font size="40" color="green"><span id="second"></span></p></strong>
<script>
function incremente() {
var CHARS = new Array();
rand = Math.floor(Math.random() * (17 - 0)) + 0;
randy = Math.round(rand);
$outChar = randy;
$first = $outChar;
var place1=document.getElementById('first');
place1.innerHTML=$first;
CHARS.push($first);
$second = CHARS.toString();
for (i=0;i<CHARS.length;i++)
{
var place2=document.getElementById('second');
place2.innerHTML=$second;
}
}
</script>
</body>
</html>
1 answers
solution1
0 ACCPTED 2015-12-13 09:42:23
Move the array above the function such that it becomes global.
Check the code.
<body bgcolor="#000000"> <font size="30" color="orange">Hex Value :- <strong><p align="center"><font size="80" color="orange"><span id="first"></span></p></strong> <p align="center"><button onclick="incremente()">Generate</button></p> <font size="3" color="green">Values generated this session:- <strong><p align="center"><font size="40" color="green"><span id="second"></span></p></strong> <script> var CHARS = new Array();//moved above the function such that it becomes global. function incremente() { rand = Math.floor(Math.random() * (17 - 0)) + 0; randy = Math.round(rand); $outChar = randy; $first = $outChar; var place1=document.getElementById('first'); place1.innerHTML=$first; CHARS.push($first); $second = CHARS.toString(); for (i=0;i<CHARS.length;i++) { var place2=document.getElementById('second'); place2.innerHTML=$second; } } </script> </body> </html>
Plunk here for you to play with your code in js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.