Как очистить переменную javascript — DOM?

Question

[Nikitos08]

Есть div c которых беру данные для расчета и вывода после клика кнопки. В javascript новичок. Я так понял , что у меня хранятся первые данные в переменных как мне завершить программу или очистить переменные. Очень вероятно что мой подход не верен. Может можно как-то по другому реализовать задуманное.

matari.oldsparky.in.ua/rassrochka.html

function creditRes() {

		var creditGetImage = document.getElementById("itemImage").innerHTML;
			document.getElementById("showItemImage").innerHTML = creditGetImage;

		var creditGetItemTitle = document.getElementById("creditTitle").innerHTML;
			document.getElementById("showCreditTitle").innerHTML = 	creditGetItemTitle;


	    var creditGetPrice = document.getElementById("mainprice").innerHTML;
	        var creditResultShow = (creditGetPrice / 2)  / 3 + " грн/мес.";
	        	var creditResultShowSecond = creditGetPrice / 3 + " грн/мес.";

	   	 document.getElementById("newprice").innerHTML = "При первом взносе 50% 3 платежа по: " + creditResultShow; 
	   	 	document.getElementById("newsecondprice").innerHTML = "Оплата 3 равными платежами по: " + creditResultShowSecond;
	   	 		document.getElementById("cartPrice").innerHTML = "Стоимость: " + creditGetPrice + " грн.";
    }

<li>
                        <div id="itemImage"><img src="http://matari.ua/images/generator/m3800e/m3800e-main.jpg"  style="width: 200px;" alt=""></div>
                        <h5 id="creditTitle" class="genn">Matari M7000E  (5.5 кВт) </h5>
                        <div class="unit ratings">
                            <div class="rate rate-5"></div>
                            <div class="otz">Отзывов (24)</div>
                            <div class="clear"></div>
                        </div>
                        <div class="product-panel fp">
                        <div class="unit price-row">
                            <div id="mainprice">20250</div>
                            <div class="item-order">
                                <div class="pp-price-status-block">
                                    <div class="pp-price-status pp-price-status-available ">Есть в наличии</div>
                                    <button name="buy_details" onclick="creditRes();" class="ibutton-css-green button success  goto change-to-details">Выбрать</button>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div id="itemImage"><img src="http://matari.ua/images/generator/bs7000e/bs7000e-main.jpg" style="width: 200px;" alt=""></div>
                        <h5 id="creditTitle" class="genn">Matari BS9000E  (6.5 кВт) </h5>
                        <div class="unit ratings">
                            <div class="rate rate-5"></div>
                            <div class="otz">Отзывов (3)</div>
                            <div class="clear"></div>
                        </div>
                        <div class="unit price-row">
                            <div id="mainprice">24300</div>
                            <div class="item-order">
                                <div class="pp-price-status-block">
                                    <div class="pp-price-status pp-price-status-available ">Есть в наличии</div>
                                    <button name="buy_details" onclick="creditRes();" class="ibutton-css-green button success  goto change-to-details">Выбрать</button>
                                </div>
                            </div>
                        </div>
    
                    </li>

<div style="width:100%; height: 200px;">
                    <div style="float:left; border-right: 1px solid #e6e6e6; height: 200px; padding-right: 20px;">
                        <div id="showItemImage"></div>
                    </div>
                    <div style="display: inline-block; margin-left: 40px">
                        <div id="showCreditTitle"></div>
                        <div id="cartPrice"></div>
                        <input type="radio"> <div id="newprice"></div></input>
                        <div style="padding-top: 10px;">
                            <input type="radio"> <div id="newsecondprice"></div></input>
                        </div>    
                    </div>    
                </div>

Answer 1

[Максим Бабичев]

ID - должен быть уникальным на странице. А у вас #itemImage повторяется в каждом блоке. Вы с ID обращаетесь как с class, так и замените ID на CLASS.

Код у вас не верный - это правда.

Для начала нужно установить событие click на button's:

document.querySelectorAll('.change-to-details').forEach(function (element) {
   element.addEventListener('click', function (event) {
       creditRes(event.target.parentNode.parentNode.parentNode.parentNode.parentNode);
   }); 
});

Удалить из button's аттрибуты onclick="creditRes();"

Да, да.. Предок долеко. В кнопку можно добавить data-аттрибут с уникальным номером. И делать, примерно, так:

var $li = document.querySelector('li#li-index-' + $attr_data_with_index);

creditRes вызывается с текущим li.

Ну и creditRes:

function creditRes($li) {

    var creditGetImage = $li.querySelector(".itemImage").innerHTML;
      document.getElementById("showItemImage").innerHTML = creditGetImage;

    var creditGetItemTitle = $li.querySelector(".creditTitle").innerHTML;
      document.getElementById("showCreditTitle").innerHTML = 	creditGetItemTitle;


      var creditGetPrice = $li.querySelector(".mainprice").innerHTML;
          var creditResultShow = (creditGetPrice / 2)  / 3 + " грн/мес.";
          	var creditResultShowSecond = creditGetPrice / 3 + " грн/мес.";

     	 document.getElementById("newprice").innerHTML = "При первом взносе 50% 3 платежа по: " + creditResultShow; 
     	 	document.getElementById("newsecondprice").innerHTML = "Оплата 3 равными платежами по: " + creditResultShowSecond;
     	 		document.getElementById("cartPrice").innerHTML = "Стоимость: " + creditGetPrice + " грн.";
    }

Скорее всего, вы хотели это!

PS. Код я не проверял. Это лишь набросок. Но в теории, код должен работать! Если всё ID заменить на классы!

Я про них: itemImage, creditTitle, mainprice, ...

UPD: запилил рабочий код: https://jsfiddle.net/jq6e9epm/1/

Comments

[Nikitos08]

Спасибо, только ваш код не работает. Хром ругается на : .forEach ( function (element)

[Максим Бабичев]

Nikitos08: заменил на for. https://jsfiddle.net/jq6e9epm/3/

[Nikitos08]

REZ1DENT3: Работает но только в песочнице. На локалкке нечего не происходит..... (

[Nikitos08]

REZ1DENT3: я его уже тупо скопипастил все равно нечего не выводит строка с текстом заглушкой....

[Nikitos08]

REZ1DENT3: Разобрался ))) Нужно в конец документа скрипт вставлять. Спасибо за помощь!