show random number of elements with JavaScript

Question

I have a quick question, I have a random function in my code, and I would like that random function to randomize 9 numbers, and depending in the number that returns, that would display the number of happy faces on my html.

My first question is how do I connect the function with my happy faces, and the second is, should I have all nine happy faces on my html, or should I just have one, and generate the others (depending on the random number) dynamically. right now I have a display: none on the css, I just commented out so you guys could see it.

I added some of the code here

'use strict';

$(document).ready(init);

var globalNum;

function init(){
	$('.number').click(clickNum);
	console.log('hello from jQuery!');
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}


console.log(getRandomInt(1,9));

function clickNum(){
	var num = $(this).text();
	console.log(num)
	// addNumToDisplay(num);

}

// function displayNum(num){
// 	globalNum = 
// 	var currentNumber = $('.number').text(num);
// 	console.log(currentNumber);
// }

* {
	/*outline: 2px solid red;*/
}

p {
	padding: 50%;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	background: #dbdfe5;
}

body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.col-sm-8 {
	width: 80%;
	height: 200px;
}

.jumbotron {
	width: 800px;
	margin: 0 auto;
	height: auto;
}

.fa-smile-o {
	background-color: yellow;
	border-radius: 50%;
	height: .9em;
    width: .9em;
    /*display: none;*/
}

.btn-group {
	position: relative;
	left: 40%;
}

.numbers {
	margin-top: 15px;
	width: 900px;
}

.number {
	font-size: 40px;
	letter-spacing: 10px;
}

#right {
	position: relative;
	height: 80px;
	width: 120px;
	font-size: 30px;
	background-color: lime;
	color: white;
}

.rightButton {
	margin-left: 50px;
	position: absolute;
}

#result {
	font-size: 30px;
	margin-left: 40px;
	padding: 30px;
	background-color: white;
	border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Game 5</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="jumbotron firstBlock">
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
			<i class="fa fa-smile-o fa-4x"></i>
		</div>
		<div class="btn-group" role="group" aria-label="...">
		  <button type="button" class="btn btn-primary">Restart</button>
		  <button type="button" class="btn btn-warning">Reroll</button>
		  <button type="button" class="btn btn-success">Check</button>
		</div>
		<div class="jumbotron numbers">
			<button class="number">1</button>
			<button class="number">2</button>
			<button class="number">3</button>
			<button class="number">4</button>
			<button class="number">5</button>
			<button class="number">6</button>
			<button class="number">7</button>
			<button class="number">8</button>
			<button class="number">9</button>
			<span class="right">
				<span id="result">5</span>
				<span class="rightButton">
				<button id="right">Right!</button>
				</span>
			</span>
		</div>
	</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>	
<script src="main.js"></script>	
</body>
</html>

Wesley Smith · Accepted Answer · 2016-02-27 08:11:10Z

2

I prefer to generate those smiles:

$(function() {
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    $('button').on('click', function() {
        var faces = '',
            i = 0,
            random = getRandomInt(1,9);
        var $firstBlock = $('div.firstBlock').html('');
        for(i;i<=random;i++) {
            faces += '<i class="fa fa-smile-o fa-4x"></i>';
        }
        $firstBlock.append(faces);
    });
});

jsFiddle example here

edited Feb 27, 2016 at 8:11

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

answered Feb 27, 2016 at 7:46

b3da

5831 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wesley Smith Over a year ago

You should re-evaluate for(i;i<=getRandomInt(1,9);i++) that has endless loop written all over it ;)

Lucky500 Over a year ago

Thanks b3da, that was what I was looking for.

Wesley Smith Over a year ago

@Lucky500 you should not call a function inside the condition of a for loop like this. Get the value first, then use the value

Wesley Smith · Accepted Answer · 2016-02-27 07:50:09Z

You connect your code to the DOM using selectors and event handlers just like you do already with $('.number').click(clickNum);

I would go the dynamic route myself as it is more versatile IMHO

This would work, and here is a working jsFiddle:

$(function() {
  $('.reroll').click(function() {
    addNumToDisplay(getRandomInt(1, 9));    
  });
  $('.number').click(function() {
    addNumToDisplay($(this).text());
  });
});

var globalNum;

function addNumToDisplay(num) {
  $('.firstBlock .fa-smile-o').remove();
  for (i = 0; i < num; i++) {
    $('.firstBlock').append('<i class="fa fa-smile-o fa-4x"></i>');
  }
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

* {
  /*outline: 2px solid red;*/
}

p {
  padding: 50%;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  background: #dbdfe5;
}

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.col-sm-8 {
  width: 80%;
  height: 200px;
}

.jumbotron {
  width: 800px;
  margin: 0 auto;
  height: auto;
}

.fa-smile-o {
  background-color: yellow;
  border-radius: 50%;
  height: .9em;
  width: .9em;
}

.btn-group {
  position: relative;
  left: 40%;
}

.numbers {
  margin-top: 15px;
  width: 900px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div class="container">
  <div class="jumbotron firstBlock">
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
    <i class="fa fa-smile-o fa-4x"></i>
  </div>
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary restart">Restart</button>
    <button type="button" class="btn btn-warning reroll">Reroll</button>
    <button type="button" class="btn btn-success check">Check</button>
  </div>
  <div class="jumbotron numbers">
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
    <span class="right">
				<span id="result">5</span>
    <span class="rightButton">
				<button id="right">Right!</button>
				</span>
    </span>
  </div>
</div>

Collectives™ on Stack Overflow

show random number of elements with JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related