Как конвертировать футы в метр в JS на документ готов? - PullRequest
Новая
       62

Как конвертировать футы в метр в JS на документ готов?

0 голосов
/ 12 октября 2018

Я думаю, что это просто, но я не нахожу никакого решения 

<p class="number">12</p>

Как я могу просто автоматически рассчитать на "готовность к документу" для измерения?

Мне не нужна кнопка просто простоерасчет

Ответы [ 5 ]

0 голосов
/ 12 октября 2018

Использование только элементов управления формы HTML

Следующие теги HTML имеют специальное поведение, которое при применении в теге <form> может вычислять пользовательские данные: 

<form oninput="out.value = (Math.round(10000*(feet.value / 3.281))/10000)">

  <input id="feet" type="number"> 

  <output id="out" for="feet"></output>

</form>

Атрибут [for="ID OF INPUT"] <output> позволяет ему синхронизироваться со значением <input> (определяемым его #ID).<form> связывает все значения в функции обратного вызова обработчика события , зарегистрированного для oninput события .

Демо 

#feet {
  text-align: center;
  width: 8ch
}
<form id='conv' oninput="out.value = (Math.round(10000*(feet.value / 3.281))/10000)">

  <label for='feet'>Feet: </label>
  <input id='feet' type='number' min='0.000'>

  <label for='meter'>Meter: </label>
  <output id='out' for='feet'></output>

</form>
0 голосов
/ 12 октября 2018

Если у вас есть несколько измерений, которые вы хотите преобразовать на своей странице, и вы хотите преобразовать все из них, вы можете использовать классы.

В приведенном ниже примере будет использоваться сочетание типов измерений. 

var feet = document.getElementsByClassName("feet-to-meters");
for (var i = 0; i < feet.length; i++) {
  feet[i].innerHTML = parseInt(feet[i].innerHTML) * 0.3048;
}
var meters = document.getElementsByClassName("meters-to-feet");
for (var i = 0; i < meters.length; i++) {
  meters[i].innerHTML = parseInt(meters[i].innerHTML) * 3.2808399;
}
20 feet is equal to <a class="feet-to-meters">20</a> meters<br>
30 meters is equal to <a class="meters-to-feet">30</a> feet<br>
10 feet is equal to <a class="feet-to-meters">10</a> meters<br>
40 meters is equal to <a class="meters-to-feet">40</a> feet<br>
0 голосов
/ 12 октября 2018

Вот простое решение для вас ..... 

<script>
        $('#number').ready(function() {
             // Do your calculation here
        });
</script>
0 голосов
/ 12 октября 2018

Если вы хотите конвертировать между футами и метрами, вам нужно использовать расчет.В JavaScript вам не нужна функция calc(), как в CSS.Вы просто делаете это прямо сейчас.
Это то, что вы ищете:

Футы в метр 

var footToMeterConversionRate = 0.3048;

var number = document.getElementById("number").innerHTML;
number = parseFloat(number);

var newNumber = number * footToMeterConversionRate;
document.getElementById("number2").innerHTML = newNumber;
<a id="number">20</a> feet is equal to
<a id="number2"></a> meters.

Метр до футов 

var footToMeterConversionRate = 3.2808399;

var number = document.getElementById("number").innerHTML;
number = parseFloat(number);

var newNumber = number * footToMeterConversionRate;
document.getElementById("number2").innerHTML = newNumber;
<a id="number">20</a> meters is equal to
<a id="number2"></a> feet.

Примечание: Если вы хотите округлить числа, используйте Math.round().

0 голосов
/ 12 октября 2018

Просто оберните его в функцию, которая ожидает доступности документа. 

// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here

   let number = document.getElementsByClassName('number')[0].innerHTML;
   // do your math here         
})();

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

<p id="number" class="number">12</p>

Решение с идентификатором: 

// self executing function here
  (function() {
     // your page initialization code here
     // the DOM will be available here

     let number = document.getElementById('number').innerHTML;
   // do your math here            
 })();
...