1

Вопрос таков. Требуется вывести параметр paymentamount в несколько блоков на одной странице например:

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


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

Но как я понял из опыта js не может работать с 2 id что по сути логично.(на 2 id уже не выводиться заданная калькулятором сумма) Мне сказали что в теории надо поменять id на class. Прошу подсказать как это будет выглядеть.Я совсем мало понимаю в js, спасибо за помощь

(Пересоздал сообщение т.к не указал 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>

2
  • Ну если на класс, то getElementsByClassName() вернет вам массив найденных объектов и вы его можете перебирать или конкретные элементы доставать
    – Mike
    12 фев 2016 в 15:57
  • А как это будет выглядеть? Я сказал что js совсем не знаю. Могли бы показать на примере добавления 2-х или 3-х блоков ?
    – tomtaker
    12 фев 2016 в 16:07

1 ответ 1

2

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

Измените на:

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

В JS вместо:

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

На:

var paymentamount = document.getElementsByClassName('paymentamount');
for (var j = 0; j < paymentamount.length; j++){
   paymentamount[j].value = i;
}
1
  • После перемены данных. Калькулятор вообще перестает работать. =(
    – tomtaker
    14 фев 2016 в 22:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.