The question is. It is required to display the paymentamount parameter in several blocks on one page for example:

... id = "paymentamount" name = "summ" value = "190"

... id = "paymentamount" name = "summ2" value = "190"

But as I understood from the experience, js cannot work with 2 id, which is essentially logical. (The sum given by the calculator can no longer be displayed by 2 id) I was told that in theory I should change id to class. Please tell me how it will look. I understand very little in js, thanks for the help.

(Re-created the message because it did not specify html)

function myFunction() { var x = document.getElementById("s2").value; var y = document.getElementById("s1").value; document.getElementById("i2").src = "/wp-content/uploads/2016/02/img/" + document.getElementById("s2").value + ".png"; zx = prise(x); zy = prise(y); i = zx - zy; if (i < 0) { i = 0 }; document.getElementById('paymentamount').value = i; } function myFunction1() { var y = document.getElementById("s1").value; document.getElementById("i1").src = "/wp-content/uploads/2016/02/img/" + document.getElementById("s1").value + ".png"; var x = document.getElementById("s2").value; zx = prise(x); zy = prise(y); i = zx - zy; if (i < 0) { i = 0 }; document.getElementById('paymentamount').value = i; } function prise(x) { var prise = { "Silver_I": 190, "Silver_II": 190, "Silver_III": 190, "Silver_IV": 190, "Silver_Elite": 190, "Silver_Elite_Master": 190, "Gold_Nova_I": 290, "Gold_Nova_II": 290, "Gold_Nova_III": 290, "Gold_Nova_Master": 290, "Master_Guardian_I": 390, "Master_Guardian_II": 390, "Master_Guardian_Elite": 390, "Distinguished_Master_Guardian": 790, "Legendary_Eagle": 1099, "Legendary_Eagle_Master": 1390, "Supreme_Master_First_Class": 1790, "Global_Elite": 1999 }; var a = 0; cena = 0; for (var key in prise) { if (key == x) { cena += prise[key]; a = a + 1; return cena; break; } a = a + 1; cena += prise[key]; } } 
 <section id="1" class="s_about bg_light"> <div class="section_header"> <h2>Калькулятор</h2> </div> <div class="section_content"> <div class="container"> <div class="row"> <div class="main_form animation_2"> <div class="col-md-6"> <div> <div class="panel-heading"> <h3>Ваш ранг</h3> </div> <div class="panel-body"> <br> <center> <img id="i1" src="/wp-content/uploads/2016/02/img/Silver_I.png" alt="..." class="img-rounded"> </center> <br> <br> <br> Укажите ваш текущий ранг <select id="s1" class="form-control input-lg" onchange="myFunction1()"> <option selected="" value="Silver_I">Серебро - I</option> <option value="Silver_II">Серебро - II</option> <option value="Silver_III">Серебро - III</option> <option value="Silver_IV">Серебро - IV</option> <option value="Silver_Elite">Серебро - элита</option> <option value="Silver_Elite_Master">Серебро - великий магистр</option> <option value="Gold_Nova_I">Золотая звезда - I</option> <option value="Gold_Nova_II">Золотая звезда - II</option> <option value="Gold_Nova_III">Золотая звезда - III</option> <option value="Gold_Nova_Master">Золотая звезда - магистр</option> <option value="Master_Guardian_I">Магистр хранитель - I</option> <option value="Master_Guardian_II">Магистр хранитель - II</option> <option value="Master_Guardian_Elite">Магистр хранитель - элита</option> <option value="Distinguished_Master_Guardian">Заслуженный магистр хранитель</option> <option value="Legendary_Eagle">Легендарный беркут</option> <option value="Legendary_Eagle_Master">Легендарный беркут - магистр</option> <option value="Supreme_Master_First_Class">Великий магистр высшего ранга</option> <option value="Global_Elite">Всемирная элита</option> </select> </div> </div> </div> <div class="col-md-6"> <div> <div class="panel-heading"> <h3>Желаемый ранг</h3> </div> <div class="panel-body"> <br> <center> <img id="i2" src="/wp-content/uploads/2016/02/img/Silver_II.png" alt="..." class="img-rounded"> </center> <br> <br> <br> Укажите желаемый ранг <select class="form-control input-lg" id="s2" onchange="myFunction()" > <option value="Silver_I">Серебро - I</option> <option selected="" value="Silver_II">Серебро - II</option> <option value="Silver_III">Серебро - III</option> <option value="Silver_IV">Серебро - IV</option> <option value="Silver_Elite">Серебро - элита</option> <option value="Silver_Elite_Master">Серебро - великий магистр</option> <option value="Gold_Nova_I">Золотая звезда - I</option> <option value="Gold_Nova_II">Золотая звезда - II</option> <option value="Gold_Nova_III">Золотая звезда - III</option> <option value="Gold_Nova_Master">Золотая звезда - магистр</option> <option value="Master_Guardian_I">Магистр хранитель - I</option> <option value="Master_Guardian_II">Магистр хранитель - II</option> <option value="Master_Guardian_Elite">Магистр хранитель - элита</option> <option value="Distinguished_Master_Guardian">Заслуженный магистр хранитель</option> <option value="Legendary_Eagle">Легендарный беркут</option> <option value="Legendary_Eagle_Master">Легендарный беркут - магистр</option> <option value="Supreme_Master_First_Class">Великий магистр высшего ранга</option> <option value="Global_Elite">Всемирная элита</option> </select> </div> </div> </div> </div> <div class="col-md-12"> <form name="pay" class="main_form" onsubmit="return validateForm()" method="post" action="https://w.qiwi.com/order/external/create.action"> <input hidden="" name="from" value="303778"/> <div class="input-group"> <span class="input-group-addon">Комментарий</span> <input class="form-control" name="comm" placeholder="Ссылка на вашу страницу ВКонтакте / Skype / E-Mail адрес" value=""/> </div> <br> <div class="input-group"> <span id="amount" class="input-group-addon">Стоимость</span> <input style="text-align: right" class="form-control" readonly="" id="paymentamount" name="summ" value="190"/> <span class="input-group-addon">рублей</span> </div> <br> <div class="input-group"> <span class="input-group-addon">Введите номер вашего qiwi счета</span> <input class="form-control" name="to" placeholder="79503332238" value=""/> <span class="input-group-addon" id="activatecoupon"></span> </div> <br> <input hidden="" name="currency" value="643"/> <input hidden="" name="lifetime" value="10"/> <input hidden="" name="successUrl" value="boostacc.ru/success"/> <input hidden="" name="failUrl" value="boostacc.ru/error"/> <center> <button style="background-color: #8238A7; letter-spacing: 2px;" type="submit">Заказать</button> </center> </form> </div> </div> </div> </div> </div> </section>

  • Well, if on a class, then getElementsByClassName () will return you an array of found objects and you can iterate over it or get specific elements - Mike
  • And what will it look like? I said that js don't know at all. Could you show by adding 2 or 3 blocks? - tomtaker

1 answer 1

In HTML: <input style="text-align: right" class="form-control" readonly="" id="paymentamount" name="summ" value="190"/>

Change to:

 <input style="text-align: right" class="form-control" readonly="" class="paymentamount" name="summ" value="190"/>

In js instead of:

 document.getElementById('paymentamount').value = i;

On:

 var paymentamount = document.getElementsByClassName('paymentamount'); for (var j = 0; j < paymentamount.length; j++){ paymentamount[j].value = i; }
  • After the change of data. The calculator stops working altogether. = ( - tomtaker