Как правильно использовать переменные в html из js не один раз?

Рейтинг: 0Ответов: 1Опубликовано: 16.07.2023

задал переменные цены одежды со скидкой и без в js

    document.getElementById("svitshot-pol").innerHTML = rere;
    var rere = 3290;
    document.getElementById("svitshot-pol-old").innerHTML = rere;

добавляю в html через id в тэге 

                        <div class="col-12 col-sm-6 col-lg-4">
                            <div class="single-product-wrapper">
                                <!-- Product Image -->
                                <div class="product-img">
                                    <img src="\img\product-img\3490161\m_svitshot_3d\1.jpg" alt="">
                                    <!-- Hover Thumb -->
                                    <img class="hover-img" src="\img\product-img\3490161\m_svitshot_3d\3.jpg" alt="">
                                </div>

                                <!-- Product Description -->
                                <div class="product-description">
                                    <span>Свитшот пол.</span>
                                    <a href="single-product-details.html">
                                        <h6>NEON RIVER</h6>
                                    </a>
                                   <p class="product-price"><span class="old-price"><p3 id="svitshot-pol-old"></p3>₽</span><p2 id="svitshot-pol"></p2>₽</p>

                                    <!-- Hover Content -->
                                    <div class="hover-content">
                                        <!-- Add to Cart -->
                                        <div class="add-to-cart-btn">
                                            <a href="#" class="btn essence-btn">ПОСМОТРЕТЬ</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Всё работает, но я могу задать эту цену только на один товар. Вопрос: Как сделать так, чтобы я мог задавать это число из переменной на другие блоки сайта.

Это я продублировал код html и цена не указалась Это я продублировал код html и цена не указалась

javascript html переменные
Источник: Stack Overflow на русском

Ответы

▲ 1

Код выполняется следующим образом:

//После загрузки страницы:
var rere = 2490; //Объявили переменную
document.getElementById("svitshot-pol").innerHTML = rere; //Нашли первый встречающийся элемент по ID и вставили текст
var rere = 3290; //Перезаписали переменную
document.getElementById("svitshot-pol-old").innerHTML = rere; //Нашли первый встречающийся элемент по ID и вставили текст

Id в коде должен быть в единственном экземпляре, по этому нужно задать класс. Обращение к элементу по классу:

document.querySelector(".svitshot-pol").innerHTML = rere; //Нашли первый встречающийся элемент по классу и вставили текст

Чтоб найти все элементы с этим классом нужно дописать в конце querySelectorAll. Таким образом получим NodeList, внутри него будут находится все найденные по классу элементы на странице. Чтобы каждому из элементов добавить текст, необходимо воспользоваться forEach:

var rere = 2490; //Объявили переменную
document.querySelectorAll(".svitshot-pol").forEach(element => element.innerHTML = rere); //Получили список элементов с классом и для каждого элемента добавили текст
var rere = 3290; //Перезаписали переменную
document.querySelectorAll(".svitshot-pol-old").forEach(element => element.innerHTML = rere); //Получили список элементов с классом и для каждого элемента добавили текст