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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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