Assign a numeric value to an html class using jquery

Asked

Viewed 606 times

0

I’m trying to make a memory game and for this I need to assign values to the div where they will be stored to compare if the selected figures are equal. I tried this way (as code below) but it is not working. Could someone point out the error or give me some hint of what I can do to work?

Javascript code

//Função para adicionar a imagem ao clicar
$('.peca').bind('click', function(){
	$(this).html('<img src="images/img1.jpg" border="0" height="100px"/>'); //Foi usado o parâmetro "this" para que ao clicar emm um objeto, somente este seja alterado
});

var p1 = $('.p1').attr('valor', 'numero[0]');
var p2 = $('.p2').attr('valor', 'numero[1]');
var p3 = $('.p3').attr('valor', 'numero[2]');
var p4 = $('.p4').attr('valor', 'numero[3]');
var p5 = $('.p5').attr('valor', 'numero[4]');
var p6 = $('.p6').attr('valor', 'numero[5]');
var p7 = $('.p7').attr('valor', 'numero[6]');
var p8 = $('.p8').attr('valor', 'numero[7]');
var p9 = $('.p9').attr('valor', 'numero[8]');
var p10 = $('.p10').attr('valor', 'numero[9]');
var p11 = $('.p11').attr('valor', 'numero[10]');
var p12 = $('.p12').attr('valor', 'numero[11]');
var p13 = $('.p13').attr('valor', 'numero[12]');
var p14 = $('.p14').attr('valor', 'numero[13]');
var p15 = $('.p15').attr('valor', 'numero[14]');
var p16 = $('.p16').attr('valor', 'numero[15]');

var numero = [16];

function numero_aleatorio () {
	var numero = [16];
	for(i=0;i<16;i++) {
		
		var ale = Math.floor(Math.random()*8+1); //Fuunção para gerar valores aleatórios de 1 a 8

		numero [i]=ale;

	}

}
<!DOCTYPE html>
<html>
	<head>
		<title>Jogo da Memória</title>
		<meta charset="utf-8">

		<style type="text/css">
			.peca{
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				background-color: blue;
				float: left;
				margin-left: 5px;
				margin-top: 5px;
			}
			.peca:hover{
				background-color: #FFF;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		
		<div class="tabuleiro">
			<div class="peca p1" valor=""></div> <!--Atribuindo uma class "valor" para fins de manipulação com javascript-->
			<div class="peca p2" valor=""></div>
			<div class="peca p3" valor=""></div>
			<div class="peca p4" valor=""></div>
			<div style="clear: both;"></div> <!--"Pular linha"-->
			<div class="peca p5" valor=""></div>
			<div class="peca p6" valor=""></div>
			<div class="peca p7" valor=""></div>
			<div class="peca p8" valor=""></div>
			<div style="clear: both;"></div>
			<div class="peca p9" valor=""></div>
			<div class="peca p10" valor=""></div>
			<div class="peca p11" valor=""></div>
			<div class="peca p12" valor=""></div>
			<div style="clear: both;"></div>
			<div class="peca p13" valor=""></div>
			<div class="peca p14" valor=""></div>
			<div class="peca p15" valor=""></div>
			<div class="peca p16" valor=""></div>
		</div>

		<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>

javascript jquery html

1 answer

0


Diego Soares, I’ve solved your problem.
First I’d like to point out a few things, you were adding an attribute in the div’s called valor, this attribute does not exist and this is not a good practice. Use data-value, otherwise this had some javascript syntax problems:

1- you were assigning var p1 = $('.p1').attr('valor', 'numero[0]'); the value at a variable p1, and was assigning the value in single quotes, no need.

2- No need to limit your array to 16 as you had done, just go giving array.push(valor).

There were other errors that are not that important to point out and I forgot, follow below the working code. 

//Função para adicionar a imagem ao clicar
$('.peca').bind('click', function(){
	$(this).html('<img src="images/img1.jpg" border="0" height="100px"/>'); //Foi usado o parâmetro "this" para que ao clicar emm um objeto, somente este seja alterado
});

var numero = [];

function numero_aleatorio () {
	for(i=0;i<16;i++) {
		numero.push(Math.floor((Math.random() * 8) + 1));
	}
};

numero_aleatorio();

$('.p1').attr('data-value', numero[0]);
$('.p2').attr('data-value', numero[1]);
$('.p3').attr('data-value', numero[2]);
$('.p4').attr('data-value', numero[3]);
$('.p5').attr('data-value', numero[4]);
$('.p6').attr('data-value', numero[5]);
$('.p7').attr('data-value', numero[6]);
$('.p8').attr('data-value', numero[7]);
$('.p9').attr('data-value', numero[8]);
$('.p10').attr('data-value', numero[9]);
$('.p11').attr('data-value', numero[10]);
$('.p12').attr('data-value', numero[11]);
$('.p13').attr('data-value', numero[12]);
$('.p14').attr('data-value', numero[13]);
$('.p15').attr('data-value', numero[14]);
$('.p16').attr('data-value', numero[15]);
<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css">
			.peca{
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				background-color: blue;
				float: left;
				margin-left: 5px;
				margin-top: 5px;
			}
			.peca:hover{
				background-color: #FFF;
				cursor: pointer;
			}
		</style>
  </head>

	<body>
		
		<div class="tabuleiro">
			<div class="peca p1" data-value=""></div> <!--Atribuindo uma class "valor" para fins de manipulação com javascript-->
			<div class="peca p2" data-value=""></div>
			<div class="peca p3" data-value=""></div>
			<div class="peca p4" data-value=""></div>
			<div style="clear: both;"></div> <!--"Pular linha"-->
			<div class="peca p5" data-value=""></div>
			<div class="peca p6" data-value=""></div>
			<div class="peca p7" data-value=""></div>
			<div class="peca p8" data-value=""></div>
			<div style="clear: both;"></div>
			<div class="peca p9" data-value=""></div>
			<div class="peca p10" valor=""></div>
			<div class="peca p11" data-value=""></div>
			<div class="peca p12" data-value=""></div>
			<div style="clear: both;"></div>
			<div class="peca p13" data-value=""></div>
			<div class="peca p14" data-value=""></div>
			<div class="peca p15" data-value=""></div>
			<div class="peca p16" data-value=""></div>
		</div>

		<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</body>
  </html>

  • Thanks even Leonardo! It worked here. It could only explain to me why the function has to be called before assigning the values?

  • @Diegosoares Because the function is that of the random value at each position of the array, if you called it later, there would be no value inside the array to insert into the data-value of each div.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.