Javascript-форум - Решил поучить js, хочу написать мини игру

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Решил поучить js, хочу написать мини игру (https://javascript.ru/forum/misc/69308-reshil-pouchit-js-khochu-napisat-mini-igru.html)

Цитата:

Сообщение от Rise (Сообщение 455500)

webxmm, да без сервера никак, но ты же хочешь научиться чему-то настоящему, ведь сайтов без сервера не бывает, и клиент-серверное взаимодействие основа основ.

Ок. Буду делать. Только меня смущает, что я буду на чистом php писать ( а сейчас актуальны фреймворки), хотя фреймворки и чистый php как небо и земля ...

for(i = 0; i < imageArray.length; i++){	
			
			
			document.getElementById("container").innerHTML += "<img src='"+imageArray[i] + "'>" + "<br/>";
			document.getElementById("container").style.width = "200px";
			document.getElementById("container").style.height = "200px";
			
		}

Не получается выставить ширину и высоту картинок :(

Цитата:

Сообщение от рони (Сообщение 455505)

webxmm,
Добавление и удаление узлов

Вы намекаете, что надо динамически создать узел IMAGE? Тогда почему у меня картинки распечатывалиь до этого? Я ведь сейчас хочу просто поменять размер им

webxmm,
мне сложно понять логику вашего кода.
может просто добавить css

<style type="text/css"> #container img {
    height: 200px;
    width: 200px;
  }

  </style>

Цитата:

Сообщение от webxmm

я буду на чистом php писать ( а сейчас актуальны фреймворки), хотя фреймворки и чистый php как небо и земля ...

Нет грязных фреймворков и чистых языков на которых и написаны их фреймворки.

Цитата:

Сообщение от рони (Сообщение 455510)

webxmm,
мне сложно понять логику вашего кода.
может просто добавить css

<style type="text/css"> #container img {
    height: 200px;
    width: 200px;
  }

  </style>

Спасибо, но я хотел путём яваскрипта сделать, в не цсс

В общем я встрял, помогайте пожалуйста

<html>
<head>
<style type="text/css"> 
#container img {
    height: 200px;
    width: 200px;
}

  </style>

</head>
<body>
<script type="text/javascript">
	
	var answer1 = "ASDASD";
	
	var imageArray = new Array("img/1.png", "img/2.png");
	var imageArray2 = new Array("img/tmp.png", "img/tmp2.png");
	var i;
	var text = "";
	var second=100;
	
	// display images from array
	function getImgArr()
	{
		
		for(i = 0; i < imageArray.length; i++){
			
			document.getElementById("imgArr").innerHTML += "<img src='"+imageArray[i]+ "'>" + " ";
			
		}
		
		
		for(i = 0; i < imageArray2.length; i++){
			
			//document.getElementById("container").innerHTML += "<img src='"+imageArray2[i]+ "'>" + " ";
			
		}
		
		document.getElementById("answer").style.display = "block";
		document.getElementById("btnAnsw").style.display = "block";
		document.getElementById("btnStart").disabled = true;
	    document.getElementById("gameinfo").innerHTML ="Game is starting...";
		
	
	}
	
		// timer 
        function tiktak()
        {
          if(second<=9){second="0" + second;}
          if(document.getElementById){timer.innerHTML=second;}
          if(second==00){
			alert("You are looser"); 
			document.getElementById("btnStart").disabled = false;
			document.getElementById("timer").innerHTML = " ";
			document.getElementById("gameinfo").innerHTML ="Game over";
			document.getElementById("container").innerHTML = " ";
			second = 5;
			return false; 
		}
		
		
		
          second--;
          setTimeout("tiktak()", 1000);
		  
        }
    window.intervalID = setInterval(timer, 1000);
	
	
	// get answer value from textbox
	function getAnswerValue(){
		var avalue = document.getElementById('answer').value;
		var avalue2 = document.getElementById('answer2').value;
		var avalue3 = document.getElementById('answer3').value;
		
		if(avalue === "ASDASD"){
			//alert(avalue);
			document.getElementById("sucok1").style.display = "block";
			document.getElementById("answer2").style.display = "block";
			document.getElementById("imgArr").innerHTML = "";
			document.getElementById("imgArr").innerHTML += "<img src='"+imageArray2[i]+ "'>" + " ";
			
			if(avalue2 === "123"){
				//alert(avalue2);
				document.getElementById("sucok2").style.display = "block";
				document.getElementById("answer3").style.display = "block";
				
				if(avalue3 === "12345"){
					document.getElementById("sucok3").style.display = "block";
					document.getElementById("answer4").style.display = "block";
				}
				else {alert ("answer TWO wrong");}
				
				
			}
			else {alert ("answer TWO wrong");}
		

		}else {alert ("answer ONE wrong");}
		
		
	}

	


</script>

<html>
<head>
<style type="text/css"> 
#container img {
    height: 200px;
    width: 200px;
}

  </style>

</head>
<body>

<input id="btnStart" type="button" value="START" OnClick="getImgArr(); tiktak();"/>
<br/>

<div id="gameinfo">

</div>

<span id="timer"></span>

<div id="container">
	<div id="imgArr"></div>
	<input type="text" id="answer" style="display:none;"><span style="display:none;" id="sucok1">Answ 1 is OK</span>
	<input type="text" id="answer2" style="display:none;"><span style="display:none;" id="sucok2">Answ 2 is OK</span>
	<input type="text" id="answer3" style="display:none;"><span style="display:none;" id="sucok3">Answ 3 is OK</span>
	<input type="text" id="answer4" style="display:none;"><span style="display:none;" id="sucok4">Answ 4 is OK</span>
	<input type="text" id="answer5" style="display:none;"><span style="display:none;" id="sucok5">Answ 5 is OK</span>
	
	<input type="button" id="btnAnsw" style="display:none;" value="Answer" OnClick="getAnswerValue()" >
</div>

<div id="gameform">
	
</div>

</body>
</html>

1. Почему у меня направильно срабатывают else?
2. Я хочу для второго вопроса вывести картинки из второго массива, но как мне сделать это, если цикл внутри функции?