Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Рандомное число в блок (https://javascript.ru/forum/misc/70454-randomnoe-chislo-v-blok.html)

Vardges 06.09.2017 13:36
Рандомное число в блок
 
Добрый день. Нужно сгенерировать рандомное число при клике и встативть в div на которого кликнули.
var elem=document.querySelectorAll('.element');//.element класс div-а

for (var i=0;i<elem.length;i++){
	elem[i].addEventListener('click',F);
}
function F(){
	var tiv=parseInt(Math.random()*9);
}

проблема в том что не могу вписать полученое число в div. querySelectorAll не работает ф с помошью this не знаю как,если даже это возможно.

Nexus 06.09.2017 13:47
Vardges,
<div class="element">
asd
</div><div class="element">
asd
</div>
<script>
var elems=document.querySelectorAll('.element');//.element класс div-а
for(var i=0; i < elems.length; i++){
	elems[i].addEventListener('click',function(){
		this.innerHTML=(Math.random()*9).toFixed();
	});
};
</script>

j0hnik 06.09.2017 13:49 
<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		div{
			display: inline-block;
			width: 30px;
			height: 30px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<script>
		[].forEach.call(document.querySelectorAll('.element'), function(el){
			el.onclick=function(){
				el.innerHTML = Math.floor(Math.random() * 9);
			};
		});
	</script>
</script>
</body>
</html>

рони 06.09.2017 14:00
Vardges,
function F(){
  this.innerHTML=parseInt(Math.random()*9);
}

Vardges 06.09.2017 14:34
Цитата:
Сообщение от рони (Сообщение 463854)
Vardges,
function F(){
  this.innerHTML=parseInt(Math.random()*9);
}
Спасибо

Vardges 06.09.2017 15:35
А как можно вытащить значения с Div и сравнить их между собой?
var elem=document.querySelectorAll('.element');

for (var i=0;i<elem.length;i++){
	elem[i].addEventListener('click',F);
}
function F(){
	this.innerText=parseInt(Math.random()*9);
	var tiv=this.innerText;
	tiv=Number(tiv);
	for (var i=0;i<elem.length;i++){
	if(tiv==elem[i]){
		var r=parseInt(Math.random()*255);
			var g=parseInt(Math.random()*255);
			var b=parseInt(Math.random()*255);
			this.style.background="green";
	}
}
}

пока что додумался до такого но не могу понять с чем сравнить переменную "tiv"

Nexus 06.09.2017 16:09
Vardges, Свойство innerText лучше не использовать.
https://developer.mozilla.org/ru/doc...Node/innerText

Цитата:
Сообщение от Vardges
не могу понять с чем сравнить переменную "tiv"
С обработанным значением другого тэга.

В некоторых случаях коллекция «elem» внутри функции «F» может быть недоступна.
https://habrahabr.ru/post/78991/
https://learn.javascript.ru/functions-closures

Vardges 06.09.2017 16:19
[quote=Nexus;463876]Vardges, Свойство innerText лучше не использовать.
https://developer.mozilla.org/ru/doc...Node/innerText


С обработанным значением другого тэга.

В некоторых случаях коллекция «elem» внутри функции «F» может быть недоступна.
https://habrahabr.ru/post/78991/
https://learn.javascript.ru/functions-closures[/QUOT]
я чайник пока что так что нечего не понял,можно разжевать?использую хром

рони 06.09.2017 16:36
Цитата:
Сообщение от Vardges
А как можно вытащить значения с Div и сравнить их между собой?
обьясните что хотите сделать? как сравнить и что потом?

Vardges 06.09.2017 16:54
Цитата:
Сообщение от рони (Сообщение 463882)
обьясните что хотите сделать? как сравнить и что потом?
задать стиль равным по значению блокам

рони 06.09.2017 17:14
Vardges,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
var color = {};
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  if (!color[tiv]) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color[tiv] = "rgb("+r+", "+g+", "+b+")"

  }
  this.style.backgroundColor = color[tiv]

}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>

Vardges 06.09.2017 18:11
Цитата:
Сообщение от рони (Сообщение 463888)
Vardges,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
var color = {};
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  if (!color[tiv]) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color[tiv] = "rgb("+r+", "+g+", "+b+")"

  }
  this.style.backgroundColor = color[tiv]

}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>
Нет,тут каждая цифра изначально имеет свой цвет, а нужно чтоб они покрасились только тогда когда есть 2 или более одинаковых цифр.

j0hnik 06.09.2017 18:54 
<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		div{
			display: inline-block;
			width: 30px;
			height: 30px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<div class="element">-</div>
	<script>
		var elm = document.querySelectorAll('.element');
		elm.forEach(el=> el.onclick=e=>{
				el.innerHTML = Math.floor(Math.random() * 9);
				col();
			});
		function col(){
			elm.forEach(el=>el.style.backgroundColor = 'white');
			var arr = [].slice.call(elm);
			arr.filter((el, i)=> { 
				while (i--) if (+el.textContent == +arr[i].textContent){
					el.style.backgroundColor = 'red';
					arr[i].style.backgroundColor = 'red';
				}
			});
		};
	</script>
</script>
</body>
</html>


может можно как то проще

рони 06.09.2017 18:55
Vardges,
не копируйте сообщение целиком
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body{
     display: flex;
      flex-wrap: wrap;
       justify-content: center;
   }

  .element  {
    border: 1px dashed  rgb(0, 0, 255); padding: 5px; height: 100px; width: 100px;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
var elem=document.querySelectorAll('.element');
for (var i=0;i<elem.length;i++){
  elem[i].addEventListener('click',F);
}
function F(){

  var tiv = parseInt(Math.random()*9);
  this.textContent = tiv;
  this.setAttribute("tiv", tiv);
  var elem = document.querySelectorAll('[tiv="'+tiv+'"]');
  var color = "transparent";
  if (elem.length > 1) {
    var r=parseInt(Math.random()*255);
    var g=parseInt(Math.random()*255);
    var b=parseInt(Math.random()*255);
    color = "rgb("+r+", "+g+", "+b+")"

  };
  for (var i=0;i<elem.length;i++){
  elem[i].style.backgroundColor = color
  }
}


  });

  </script>
</head>

<body>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</body>
</html>


Часовой пояс GMT +3, время: 03:08.