В чём ошибка скрипта?

Question

[Voldemar_pauk]

Есть скрипт для появление информации которой работает через js.
Скрипт работает отлично, но почему-то в браузере через f12 показывает ошибку в скрипте, хотя VSC молчит об этом.
В чём проблема ?
HTML:

<div class="tovar1" id="tovar3_count">
<div class="v1" id="tovar_image2">
<img style="height: 100%;width: 100%;" src="perfume-4661620_1280.jpg"/>
</div>
<div class="v2" id="tovar_price2">
<button style="width: 100%;height: 100%;opacity: 0;" id="pr3"></button>
<script src="conten.js"></script>                                  <--Скрипт>
<ul style="text-decoration:none;">
<li id="li_name2"> Гора Кавказа</li>
<li id="li_price2">234.00$</li>
</ul>
</div>
<div class="v3" id="tovar_reviy2">
<button class="ddd" id="cl3">
X
</button>
<script src="conten.js"></script>
<p style="color: white;font-size: 60px;">
Багровая кровь и запах гор<br>
</p>
</div>
</div>

Js

pr3.onclick=function(){   /*  Uncaught ReferenceError: pr3 is not defined at conten.js:83*/
document.getElementById('tovar3_count').style.width="100%"
document.getElementById('tovar3_count').style.height="90%"
document.getElementById('tovar3_count').style.position="absolute"
document.getElementById('tovar3_count').style.zIndex="1"
document.getElementById('tovar_price2').style.width="50%"
document.getElementById('tovar_image2').style.width="50%"
document.getElementById('tovar_reviy2').style.display="block"
document.getElementById('li_name2').style.fontSize="60px"
document.getElementById('li_name2').style.paddingTop="40px"
document.getElementById('li_price2').style.fontSize="60px"
document.getElementById('li_price2').style.paddingTop="40px"
}

cl3.onclick=function(){     /* Uncaught ReferenceError: cl3 is not defined at conten.js:97*/
document.getElementById('tovar3_count').style.width="90%"
document.getElementById('tovar3_count').style.height="60%"
document.getElementById('tovar3_count').style.position="relative"
document.getElementById('tovar3_count').style.zIndex="0"
document.getElementById('tovar_price2').style.width="100%"
document.getElementById('tovar_image2').style.width="100%"
document.getElementById('tovar_reviy2').style.display="none"
document.getElementById('li_name2').style.fontSize="x-large"
document.getElementById('li_name2').style.paddingTop="10px"
document.getElementById('li_price2').style.fontSize="x-large"
document.getElementById('li_price2').style.paddingTop="10px"
}

И так у всех строк где обозначается функция в Js...

Answer 1

[Александр]

Скрипт перед закрытием body поставьте.

Comments

[Voldemar_pauk]

Помогло, а почему так оно работает ?

[Александр]

Voldemar_pauk, Потому что на тот момент, когда скрипт был загружен и выполнен, в DOM дереве не было необходимых элементов. Также советую прислушаться к Олег Бубнов и v3shin, т. к. решение через id не очень хорошее.

Answer 2

[NeKt0]

"...id="tovar..." - никогда так не называйте классы или переменные! Дурной тон! Названия должны быть на английском языке.

"...cl3.onclick=function..." - это тоже дурной тон! Есть же события, которые можно повесить на элементы.

Comments

[Voldemar_pauk]

Я знаю что нужно на английском, просто я писал быстро для проверки.
А как правильно записать ?

document.getElementById('pr3').addEventListener('click', function(){
    document.getElementById('tovar3_count').style.width="100%";
    document.getElementById('tovar3_count').style.height="90%";
    ...
});

Так ?

[NeKt0]

Voldemar_pauk, элементы выведите в константы, например так:

const goods3 = document.getElementById('tovar3_count');
или
const product3 = document.getElementById('tovar3_count');

Пример Вашего кода в более приятном виде:

const productWrap = document.getElementById('pr3');
const product3 = document.getElementById('tovar3_count');

productWrap.addEventListener('click', () => {
    product3.style.width="100%";
    product3.style.height="90%";
    ...
});

Код будет смотреться чище. И стрелочные функции Вам в помощь.

В идеале нужно переменные называть так, чтобы потом другие разрабы не мучились вопросом "а что это нахрен такое?"

Answer 3

[v3shin]

document.getElementById('pr3').addEventListener('click', function(){
    document.getElementById('tovar3_count').style.width="100%";
    document.getElementById('tovar3_count').style.height="90%";
    ...
});

И с cl3 так же поступите.