вспытие окошек при выборе select

[Menshakovich]

Добрый вечер!Помогите пожалуйста!!!
Дело в том, что мне нужно при выборе определенного числа, высвечивались окошечки, число которые равно выбранному числу из select.
Вот код. но явно что-то не так(

div class="line_buttom">       <select class="size_of_buttoms" name="child" onchange="ChildCount(this)">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    возраст
                    <span class="size_of_buttoms">
                    <input name="agechild[]" class="agechild" style="display: none;" type="text">
                    <input name="agechild[]" class="agechild" style="display: none;" type="text">
                    <input name="agechild[]" class="agechild" style="display: none;" type="text">
                    <input name="agechild[]" class="agechild" style="display: none;" type="text">
                    <input name="agechild[]" class="agechild" style="display: none;" type="text">
                    </span>
                        </div>

и скрипт

<script type="text/javascript">
    function ChildCount(select)
    {
    var a=select.value;
        
    
        if (a==1)
    {       document.getElementByTagName("agechild[]").style.display="block";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
    }
        if (a==2)
    {       document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
    }       
        if (a==3)
        {   document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementById("agechild[]").style.display="none";
            document.getElementById("agechild[]").style.display="none";
        }   
        if (a==4)
        {   document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementById("agechild[]").style.display="none";
        }
        if (a==5)
        {   document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
            document.getElementByTagName("agechild[]").style.display="block";
        }
    
    }
    </script>

[j0hnik]

<div class="line_buttom">       
		<select class="size_of_buttoms" name="child">
			<option value="0">0</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
		возраст
		<span class="size_of_buttoms">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
		</span>
	</div>


	<script>
		document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
	</script>

[Menshakovich]

На данном сайте все запускается, но при вставки в html-файл не работает( С чем это связано? Аж по словам копировал и никак

[j0hnik]

document.addEventListener("DOMContentLoaded", function(){
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
});

так попробуйте, если не заработает смотрите в консоль
(может есть в html такие же классы у других блоков)

[Menshakovich]

я и тут запустил... не работает
https://jsfiddle.net/w25zfLm3/17/

[Menshakovich]

извините,что так не могу разобраться. только только начал(((

[Menshakovich]

уже все убрал. оставил это. на сайте данном работает https://jsfiddle.net/w25zfLm3/20/ а на компе у меня нет(

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
<link href="./css/style.css" rel="stylesheet">
<script>
	document.addEventListener("DOMContentLoaded", function(){
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
});
	</script>
	
   
</head>

 <body>

<div class="line_buttom">       
<select class="size_of_buttoms" name="child">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
		возраст
<span class="size_of_buttoms">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
			<input name="agechild[]" class="agechild" style="display: none;" type="text">
		</span>
	</div>



			
			
</body>
</html>

[Menshakovich]

Извиняюсь!Все работает!ОГРОМНОЕ ВАМ СПАСИБО!!!