getElementById()

167

11 марта 2019, 02:10

function setBg () { 
	var rand = Math.round(Math.random()*17)+1; 
	for(i = 1; i!=37; i++) { 
		document.getElementById('"window'+i+'"').style.backgroundImage = "url('img/"+rand+".jpg')"; 
	} 
}

.container { 
	display: grid; 
	grid-template-columns: 100px 100px 100px 100px 100px 100px; 
	grid-template-rows: 100px 100px 100px 100px 100px 100px; 
} 
 
.container div { 
	border: 2px solid black; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="css/main.css"> 
</head> 
<body> 
	<button onclick="setBg()">Start game</button> 
	<div class="container"> 
		<div id="window1"></div> 
		<div id="window2"></div> 
		<div id="window3"></div> 
		<div id="window4"></div> 
		<div id="window5"></div> 
		<div id="window6"></div> 
		<div id="window7"></div> 
		<div id="window8"></div> 
		<div id="window9"></div> 
		<div id="window10"></div> 
		<div id="window11"></div> 
		<div id="window12"></div> 
		<div id="window13"></div> 
		<div id="window14"></div> 
		<div id="window15"></div> 
		<div id="window16"></div> 
		<div id="window17"></div> 
		<div id="window18"></div> 
		<div id="window19"></div> 
		<div id="window20"></div> 
		<div id="window21"></div> 
		<div id="window22"></div> 
		<div id="window23"></div> 
		<div id="window24"></div> 
		<div id="window25"></div> 
		<div id="window26"></div> 
		<div id="window27"></div> 
		<div id="window28"></div> 
		<div id="window29"></div> 
		<div id="window30"></div> 
		<div id="window31"></div> 
		<div id="window32"></div> 
		<div id="window33"></div> 
		<div id="window34"></div> 
		<div id="window35"></div> 
		<div id="window36"></div> 
	</div> 
 
 
 
 
	<script src="js/script.js"></script> 
</body> 
</html>

Ошибка в document.getElementById('"window'+i+'"'), но не пойму что же не правельно

Answer 1

Замените ('"window' + i + '"') на ('window' + i). Двойные кавычки в HTML коде не являются частью id - они являются границами значения атрибута

Пример:

function setBg () { 
  for (var i = 1; i <= 4; i++) { 
    var rand = Math.round(Math.random() * 17) + 1; 
    var url = "https://via.placeholder.com/100x100?text=text" + rand; 
    var element = document.getElementById("window" + i); 
    element.style.backgroundImage = "url('" + url + "')"; 
  } 
}

.container { 
  display: grid; 
  grid-template-columns: 100px 100px 100px 100px 100px 100px; 
  grid-template-rows: 100px 100px 100px 100px 100px 100px; 
} 
 
.container div { 
  border: 2px solid black; 
}

<button onclick="setBg()">Start game</button> 
<div class="container"> 
  <div id="window1"></div> 
  <div id="window2"></div> 
  <div id="window3"></div> 
  <div id="window4"></div> 
</div>