Как динамически при выборе select менять курс в калькуляторе?

145

11 марта 2019, 10:10

Код:

document.getElementById("selsel").addEventListener("change", function () { 
    var opt = this.value; 
    var get = document.getElementById('psevdo'); 
if (opt == 4 ) { 
  document.getElementById('whats').innerHTML = "Введите сумму в [USD]: "; 
  get.value='500';  
  calculate2(7000); 
} else { 
  document.getElementById('whats').innerHTML = "Введите сумму в [RUB]: "; 
  get.value='100'; 
  calculate2(100); 
} 
}); 
function calculate2(st_q) { 
  var min = 0.01; 
  var ser_pr = 100; 
  var sum_insert = parseFloat(st_q); 
  $('#res_sum').html( (sum_insert * ser_pr).toFixed(0) ); 
    $('#wm_summ').val(sum_insert); 
}

<form name="pay_is" action="" method="post"> 
    <table  border="0" align="center"> 
      <tr> 
        <td> 
 
          <input type="hidden" name="m" value="<?=$fk_merchant_id?>"> 
          <div id="whats">Введите сумму в [РУБ]:</div> 
          <div id="whats1"> 
            <input type="text" type="number" value="100"  name="sum" size="7" id="psevdo" onchange="calculate2(this.value)" onkeyup="calculate2(this.value)" onfocusout="calculate2(this.value)" onactivate="calculate2(this.value)" ondeactivate="calculate2(this.value)"> 
             
            Вы получите <span id="res_sum">10000</span> материала 
          </div> 
 
 
      </td> 
   </tr> 
   <tr> 
     <td> 
валюта:&nbsp;&nbsp; 
       <select size="1" name="service" id="selsel"> 
         <option selected="selected" value="1">рубли</option> 
         <option value="4"> доллары</option> 
       </select> 
     </td> 
   </tr> 
   <tr> 
     <td align="center"> 
       <input type="submit" name="pay_is" class="sumserf2" value="обменять"> 
     </td> 
   </tr>		 
 </table>			 
</form>

У меня тут две проблемы:

не работает онлайн калькулятор
не знаю как динамически при выборе select менять курс в калькуляторе

jsfiddle

Answer 1

Ваш код был вполне себе рабочим, но Вам стоило подключить jQuery, если хотите использовать эту библиотеку. (Хотя, на мой взгляд, здесь она очень даже лишняя. Тянуть библиотеку только ради изменения содержимого пары элементов явно не стоит) Получить выбранную валюту можно так: document.getElementById('selsel').value.
Помимо этого не стоит навешивать кучу однотипных событий на элемент - одного вполне себе предостаточно. И вместо инлайн событий (onkeyup, onkeydown, etc.) лучше использовать elem.addEventListenerдля разделения вёрстки и логики - в будущем проблем будет меньше. Ниже предоставил исправленный пример.

document.getElementById('psevdo').addEventListener('keyup', (e) => calculate2(e.target.value)); 
document.getElementById("selsel").addEventListener("change", function() { 
  var opt = this.value; 
  var get = document.getElementById('psevdo'); 
  if (opt == 4) { 
    document.getElementById('whats').innerHTML = "Введите сумму в [USD]: "; 
    get.value = '500'; 
    calculate2(500); 
  } else { 
    document.getElementById('whats').innerHTML = "Введите сумму в [RUB]: "; 
    get.value = '100'; 
    calculate2(100); 
  } 
}); 
 
function calculate2(st_q) { 
  var min = 0.01; 
  var ser_pr = +document.getElementById('selsel').value === 1 ? 100 : 7000; 
  var sum_insert = parseFloat(st_q) * ser_pr; 
  document.getElementById('res_sum').textContent = sum_insert; 
  document.getElementById('res_sum').value = parseFloat(st_q); 
}

<form name="pay_is" action="" method="post"> 
  <table border="0" align="center"> 
    <tr> 
      <td> 
        <input type="hidden" name="m" value="<?=$fk_merchant_id?>"> 
        <div id="whats">Введите сумму в [РУБ]:</div> 
        <div id="whats1"> 
          <input type="text" type="number" value="100" name="sum" size="7" id="psevdo"> Вы получите <span id="res_sum">10000</span> материала 
        </div> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        валюта:&nbsp;&nbsp; 
        <select size="1" name="service" id="selsel"> 
          <option selected="selected" value="1">рубли</option> 
          <option value="4"> доллары</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td align="center"> 
        <input type="submit" name="pay_is" class="sumserf2" value="обменять"> 
      </td> 
    </tr> 
  </table> 
</form>