2016-03-08 1 views
-1

У меня есть два массива:Вставьте несколько номеров из массива в к HTML

var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8]; 
var premiumPrice = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8]; 

Когда HTML документ загружается мне нужно вставить номер из массива под названием «цены» на <div> с ИД, соответствующий индексу массива и «premiumPrice» к другому <div>. Я понял, что HTML документ может выглядеть следующим образом (обратите внимание, где идентификатор):

<div class="header" id="1"> 
    <h2>BTC <span>1,00</span><em> /Month</em></h2> 

    <div class="price blue">SMALL</div> 
</div><!--/ header --> 


<div class="details"> 
    <ul> 
     <li><b>1 000</b> sites</li> 
    </ul> 

<div class="specialPromo"> 
    <input type="checkbox"><label>Add <b>PREMIUM</b><br><em>(+<span id="1">0,15</span> usd/month)</em></label> 

</div><!--/ specialPromo --> 
</div><!--/ details --> 
    <a href="/cos/cos/ID" class="btn ">SELECT</a> 
</div><!--/ item --> 

После нажатия на флажок, чтобы заголовок сНа должны быть возвращена premiumPrice + цена (из массива).

Я не знаю, как это сделать.

+3

Пожалуйста, скопируйте * фактический * HTML, чтобы вопрос, а не скриншот из него, вместе с кодом JS Вы написали себя в попытке решить эту проблему. –

+0

@Roy Для этого момента проблема решена с помощью регулярных выражений, которые берут число из html-файла (в код, который вставлен 5 строк снизу (ввод) и 2 сверху). После нажатия кнопки (класс btn) числа берутся из html, они добавляются и переводятся в строку 2 (в приведенном выше примере) –

ответ

0

Вот как вы получаете элемент и устанавливаете его внутреннее значение. Есть и другие способы, но я не совсем уверен, что вы пытаетесь сделать, это самый общий способ, о котором я мог думать. это хорошая отправная точка.

element = document.getElementById('1'); 

element.innerHTML = 'someValue' 
0

Возможно, что-то вроде этого?

var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8]; 
//loop through prices 
for (var i=0;i<prices.length;i++){ 
    var idString = i.toString(); 
    //get the element and 
    document.getElementById(idString).innerHTML = prices[i]; 
} 
0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script> 
     var prices = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8]; 
     var premiumPrice = [9.15, 10.10, 13.15, 4, 5, 6, 7, 8]; 


     window.addEventListener('load', function(){ 
      var id = document.getElementsByClassName('header')[ 0 ]; 
      var price = id.querySelector('span'); 

      price.textContent = prices[ id.getAttribute('id') ]; 

      document.getElementsByTagName('input')[ 0 ] 
       .addEventListener('click', function(){ 
        var price_specialPromo = document.getElementsByClassName('specialPromo')[ 0 ] 
         .querySelector('span'); 

        price_specialPromo.textContent = prices[ id.getAttribute('id') ] + premiumPrice[ id.getAttribute('id') ]; 
       }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="header" id="1"> 
     <h2>BTC <span>1,00</span><em> /Month</em></h2> 

     <div class="price blue">SMALL</div> 
    </div><!--/ header --> 


    <div class="details"> 
     <ul> 
      <li><b>1 000</b> sites</li> 
     </ul> 

     <div class="specialPromo"> 
      <input type="checkbox"><label>Add <b>PREMIUM</b><br><em>(+<span id="1">0,15</span> usd/month)</em></label> 
     </div><!--/ specialPromo --> 
    </div><!--/ details --> 

    <a href="/cos/cos/ID" class="btn ">SELECT</a> 
</body> 
</html> 
Смежные вопросы