Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подключить функцию через onclick (https://javascript.ru/forum/misc/58353-podklyuchit-funkciyu-cherez-onclick.html)

Picnic 17.09.2015 12:25

Подключить функцию через onclick
 
Здравствуйте.

Есть несколько расположенных друг за другом работающих спойлеров (код ниже), ссылка http://b2btools.ru/makita
(В комментах сразу отпишитесь, пожалуйста, можно ли тут ссылку оставлять или лучше удлить её сразу?)

<div class="spoil">
<div class="smallfont">
<input type="button" value="Станки" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
 this.innerText = ''; this.value = 'Свернуть'; } 
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
 this.innerText = ''; this.value = 'Текст спойлера'; }"/>
</div>
<div class="alt2">
<div style="display: none;">

<ul>

<li><a href="" alt=" Заточные станки"> Заточные станки</a>
</li>
<li><a href="" alt=" Станки распиловочные "> Станки распиловочные </a>
</li>
<li><a href="" alt=" Станки рейсмусовые"> Станки рейсмусовые</a>
</li>
<li><a href="" alt=" Отрезные машины по металлу "> Отрезные машины по металлу </a>
</li>
</ul>

</div>
</div>
</div>


Коряво? Возможно. Можно проще? Возможно. Но этот вариант работает и вполне устраивает. Однако, функция onclick у всех спойлеров одинаковая, в связи с чем вопрос:
могу ли я вынести функцию в джскрипт в хедере и подключить его ссылкой?
Или же тогда прийдётся каждому спойлеру свой id привязывать?
Пробовал делать в виде onclick="Spoil()", запихивая код функции в скрипт в хедера в виде
function Spoil() {
   if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
 this.innerText = ''; this.value = 'Свернуть'; } 
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
 this.innerText = ''; this.value = 'Текст спойлера'; }"/>
}


Что именно я делаю не так?
И да, быть может кто-то посоветует такую же реализацию спойлеров, в таком же количестве, но средствами чистого css? Не люблю джаву =(

P.S.: На код не ругатесь, сайт написан не мной, моя задача - редактирование некоторых элементов внешнего вида и создание новых страничек =)


Часовой пояс GMT +3, время: 14:45.