如何在准备好文档的JS中将英尺转换为米？

Question

我认为这很简单，但是我找不到任何解决方法

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

如何简单地自动计算“准备好文档”以进行计量？

我只需要一个简单的计算就不需要按钮

Answer 1

  

这是为您提供的简单解决方案.....

<script>
        $('#number').ready(function() {
             // Do your calculation here
        });
</script>

Answer 2

只需将其包装在等待文档可用的函数中即可。

// 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         
})();

最后，最好使用ID而不是类名，这样您可以更好地解决它。

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

具有ID的解决方案：

// 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            
 })();

Answer 3

如果要在英尺和米之间转换，则需要使用计算。在JavaScript中，不需要像CSS中的calc()函数。你就马上做吧
这些是您要寻找的东西：

英尺到米

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()。

Answer 4

如果您要在页面上转换多个度量，并且想要转换所有度量，则可以使用类。

下面的示例将混合使用多种测量类型。

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>

Answer 5

仅使用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>

<output>的[for="ID OF INPUT"]属性允许它与<input>的值（由其#ID确定）同步。 <form>将所有值绑定到已注册到 on-event handler 的 oninput event 的回调函数中。

---

演示

#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>