Zmiana rozmiaru obiektu

Question

Witam, bazując na kodzie z grą wisielec (odcinek kursu javascript )chciałem pobawić się z zmianą rozmiaru kwadracików z literami. Obszar na litery nazywa się alfabet, a w środku litery .litera

wykonuję to poleceniem ponizej jednak działa on tylko i wyłącznie na pierwszy kwadrat.

document.querySelector('.litera').setAttribute('style','height:45px;width:45px');

Na stronie mam pole do wpisania ilości kwadracików i wywołuje funkcje generator, która odczytuje wartość i ustawia ją w zmiennej xx i wywoływana jest funckje start.

Kwadraciki nie wy wyświetlają się w ogóle jak umieszczę warunek z ustawianiem warunku przed pętlą. 

Rozmiar diva alfabet  zmieniam poleceniem  i działa idealnie.

if(xx<10) document.getElementById('alfabet').setAttribute("style","width:200px");

#alfabet
{
	border-style:solid;
	border-width: medium;
	border-color:rgb(0, 0, 0);	
	background-color: rgb(221, 221, 221);
	width: 275px;
	text-align: center;
	margin:auto;
	padding:10px;
	color: black;
	scroll-margin-bottom: 100px;
}

.litera
{
	font-size: 0.1px;
	background-color:white;
	width: 5px;
	height: 5px;
	text-align:center;
	padding: 4px;
	margin: 1px;
	border: 1px solid #808080;
	float: left;
	cursor: pointer;
}


-------------------------------------------------
function start()
{	
	
	
	

	var tresc_diva ="";
	for (i=0; i<=size; i++)
	{
		var element = "lit" + i;

		tresc_diva = tresc_diva + '<div class="litera" onclick="sprawdz('+i+')" id="'+element+'">'+litery[i]+'</div>';
		if ((i+1) % xx ==0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
		
	}
	tresc_diva=tresc_diva+'<input type="submit" value="wyczyść" onclick="cleaner()"/>'+'     '+'<input type="submit" value="odwróć" onclick="invert()"/>';
	
	document.getElementById("alfabet").innerHTML=tresc_diva;

	if(xx<10){
		document.querySelector('.litera').setAttribute('style','height:45px;width:45px');
	}
	else if(xx>10){
		document.querySelector('.litera').setAttribute('style','height:15px;width:15px');
	}

 

Comments

Tak jak napisał @Michał Bysiewicz 

musisz użyć: document.querySelectorAll

Propozycja  

<div id="alfabet"></div>

#alfabet
{
  border-style: solid;
  border-width: medium;
  border-color: rgb(0, 0, 0);  
  background-color: rgb(221, 221, 221);
  width: 275px;
  height: auto;
  text-align: center;
  margin: auto;
  padding: 10px;
  color: black;
  scroll-margin-bottom: 100px;
}
.litera
{
  font-size: 0.7em;
  background-color: white;
  width: 5px;
  height: 5px;
  text-align: center;
  padding: 4px;
  margin: 1px;
  border: 1px solid #808080;
  float: left;
  cursor: pointer;
  color: black;
}
input[type="submit"] {
  margin: 2em 1em 0 1em;
  width: 70px;
}

const litery = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l' ];
const size = litery.length;
const xx = 4; 

start();

function start() {    
  let tresc_diva = "";
  for (i=0; i<size; i++) {
    tresc_diva += `<div class="litera" onclick="sprawdz(${i})"`
                + `id="lit${i}">${litery[i]}</div>`;
    if ((i+1) % xx ==0) tresc_diva += '<div style="clear:both;"></div>';         
  }

  tresc_diva += '<input type="submit" value="wyczyść" onclick="cleaner()">'
              + '<input type="submit" value="odwróć" onclick="invert()">';

  const div_alfabet = document.querySelector('#alfabet');
  div_alfabet.innerHTML = tresc_diva;

  if (xx<10)  { 
    div_alfabet.setAttribute("style","width:275px"); 
    literaSize(45); 
  } else if (xx>10)  { 
    div_alfabet.setAttribute("style","width:200px"); 
    literaSize(); // literaSize(15)
  }
}

function literaSize(x=15) {
  [...document.querySelectorAll('.litera')].forEach(item => {
    item.setAttribute('style', `height: ${x}px; width: ${x}px`);
  });    
}

 

Answer 1

wykonuję to poleceniem ponizej jednak działa on tylko i wyłącznie na pierwszy kwadrat.

document.querySelector('.litera').setAttribute('style','height:45px;width:45px');

Działa na pierwszy kwadrat, ponieważ document.querySelector daje Ci referencje do pierwszego elementu o podanej klasie/id, aby mieć referencje do wszystkich elementów trzeba użyć document.querySelectorAll(pobiera wszystkie elementy)  + pętla, która doda to do każdego pojedyńczego elementu