Изменение содержимого div по клику кнопки

19 Posts

concept2 Reply #1, 11 years, 10 months ago

Здравствуйте. Помогите реализовать следующее. Нужно, чтобы на сайте в dive при нажатии на кнопку менялось содержимое без перезагрузки страницы. Исходный вариант - изображение изделия. При нажатии на кнопку, например, "Заказать" вместо картинки выводится контактная информация и кнопка меняется на "назад". При нажатии на кнопку снова выводится исходная картинка.
Сделал следующим образом.

<input type="button" id="btn" value="Заказать" onClick="fun();"/>

<div id="page_product_content_right">
<img src="images/fjord/shkaf_fjord_113/shkaf_fjord_113.png" height="400" alt="">
</div>

<script>
function fun(){
page_product_content_right=document.getElementById('page_product_content_right');
btn=document.getElementById('btn');
if(btn.value=='Заказать'){
page_product_content_right.innerHTML='контактная информация';
btn.value='Назад';
}
else{
page_product_content_right.innerHTML='<img src="images/fjord/shkaf_fjord_113/shkaf_fjord_113.png" height="400" alt="">';
btn.value='Заказать';
}

}</script>

В чистом HTML все работает, но если вместо прямого пути ставим tv - [[*foto_izdelija]]

<div id="page_product_content_right">
[[*foto_izdelija]]
</div>
<script>
function fun(){
page_product_content_right=document.getElementById('page_product_content_right');
btn=document.getElementById('btn');
if(btn.value=='Заказать'){
page_product_content_right.innerHTML='контактная информация';
btn.value='Назад';
}
else{
page_product_content_right.innerHTML='[[*foto_izdelija]]';
btn.value='Заказать';
}

}</script>

то повторно картинка не выводится - пустое поле. Собственно вопрос - как вызвать переменную TV в скрипте или реализовать все это как-то иначе?

196 Posts

whitebyte Reply #2, 11 years, 10 months ago

Если у вас в TV [[*foto_izdelija]] хранится только путь, то надо

<div id="page_product_content_right">
[[*foto_izdelija]]
</div>

заменить на

<div id="page_product_content_right">
<img src="[[*foto_izdelija]]" height="400" alt="">
</div>

http://whitebyte.ru

19 Posts

concept2 Reply #3, 11 years, 10 months ago

Добрый день.

Из этого div картинка выводится. Она не выводится из скрипта, т.е. из этой записи в скрипте
else{ page_product_content_right.innerHTML='[[*foto_izdelija]]';

Собственно вопрос - как вызвать переменную TV в скрипте

196 Posts

whitebyte Reply #4, 11 years, 10 months ago

Ах вот оно что.

[[*foto_izdelija]], как и любая TV, парсится парсером MODX на сервере, заменяется на свое реальное значение (в данном случае путь), отдается клиенту, и для javascript напрямую не доступна. Но вам это и не нужно.

Можно сделать так:

<script>

// поправка - блок переменных должен быть вне функции!

var page_product_content_right = document.getElementById('page_product_content_right'),
    btn = document.getElementById('btn'),
    contentImage = page_product_content_right.innerHTML,
    contentContact = 'контактная информация',

function fun() {

if (btn.value === 'Заказать') {
    page_product_content_right.innerHTML = contentContact;
    btn.value = 'Назад';
} else {
    page_product_content_right.innerHTML=contentImage;
    btn.value = 'Заказать';
}

}</script>

http://whitebyte.ru

19 Posts

concept2 Reply #5, 11 years, 10 months ago

Вставил Ваш скрипт - почему-то ничего не происходит sad

Вот страничка, где это все должно работать - http://ecomebel.by/fjord/shkaf-fjord-113.html

196 Posts

whitebyte Reply #6, 11 years, 10 months ago

После того, как вы вставили код, я делал еще одну правку в своем посте. Скопируйте еще раз и попробуйте.

http://whitebyte.ru

19 Posts

concept2 Reply #7, 11 years, 10 months ago

не работает sad

196 Posts

whitebyte Reply #8, 11 years, 10 months ago

Что-то я сегодня плох. Попытка номер пять, пробуйте

<script>
 
document.addEventListener('DOMContentLoaded', function() {
var page_product_content_right = document.getElementById('page_product_content_right'),
    btn = document.getElementById('btn'),
    contentImage = page_product_content_right.innerHTML,
    contentContact = 'контактная информация';
});
 
function fun() {
 
if (btn.value === 'Заказать') {
    page_product_content_right.innerHTML = contentContact;
    btn.value = 'Назад';
} else {
    page_product_content_right.innerHTML=contentImage;
    btn.value = 'Заказать';
}
 
}</script>

http://whitebyte.ru

19 Posts

concept2 Reply #9, 11 years, 10 months ago

И опять ничего sad

196 Posts

whitebyte Reply #10, 11 years, 10 months ago

Отписался в личку

http://whitebyte.ru