Question

我试图找出价格和售价之间节省的百分比金额，并将结果显示在div中。到目前为止，我有以下内容，但它似乎并没有起作用。谁能看到我出错的地方？

<script type="text/javascript">
function calc()
{
    var price = 0;
    var saleprice = 0;
    var savingPercent = 0;

    price = Number(document.getElementById("price").value);
    saleprice = Number(document.getElementById("saleprice").value); 

    savingPercent =(((price - saleprice) / price) * 100).toFixed(0);
    document.getElementById('savingPercent').innerHTML = "You have saved" +savingPercent+"% ";  
}
</script>

<div id="price">&pound;100</div>
<div id="saleprice">&pound;20</div>
<div id="savingPercent"></div>

Answer 1

您的代码中存在多个问题。

您未在任何地方调用calc功能
具有ID price和saleprice的元素HTMLDivElement来自您在代码中放置的div标记。他们没有名为value的财产。正确的属性应为textContent。
由于您的值在值本身之前具有£字符，因此您应该只接受其后的子字符串。

以下代码段正如您所料。

＆＃13;

function calc() {
  var price = 0;
  var saleprice = 0;
  var savingPercent = 0;
  
  price = Number(document.getElementById("price").textContent.substring(1));
  saleprice = Number(document.getElementById("saleprice").textContent.substring(1)); 

  savingPercent =(((price - saleprice) / price) * 100).toFixed(0);
  document.getElementById('savingPercent').innerHTML = "You have saved " + savingPercent + "%";  
}
  
calc();

＆＃13;

<div id="price">&pound;100</div>
<div id="saleprice">&pound;20</div>
<div id="savingPercent"></div>

＆＃13;

Answer 2

div标签没有价值，你需要使用innerHTML，如下所示：

dropdownCssClass: "ui-widget ui-jqdialog mycustomclass"

并将£移到div之外

Answer 3

这不起作用，因为Number只将数字字符串转换为数字（例如"300" =＆gt; 300），不解析数字混合字符串中的值（例如Number("$500") === NaN）。您需要使用正则表达式来解析数值：

price = document.getElementById("price").value;
saleprice = document.getElementById("saleprice").value; 

// remove non-numeric values and cast to a Number
price = Number(price.replace(/[^\d]/g, ''));
saleprice = Number(saleprice.replace(/[^\d]/g, ''));

Answer 4

就像RobertAKARobin所说的那样，你无法在任何地方调用这个功能。你也没有得到合适的价格。

而不是value，您需要获得innerHTML。因此，您的浏览器无法使用Pund-sign解析字符串，您需要对该值进行子串。

最后，您应该使用parseInt()将字符串解析为int，如下所示：

var price = parseInt(document.getElementById("price").innerHTML.substr(1));

Answer 5

即使您可以执行innerHTML或textContent，

slice或substr也不是正确的地方 - 它太复杂了。

为什么不简单地将数据保存在数据集中？阅读data-*属性。

<div id="price" data-value="100">&pound;100</div>
<div id="saleprice" data-value="20">&pound;20</div>
<div id="savingPercent"></div>

<script type="text/javascript">
function calc()
{
    var price = Number(document.getElementById("price").dataset.value);
    var saleprice = Number(document.getElementById("saleprice").dataset.value); 
    var savingPercent =(((price - saleprice) / price) * 100).toFixed(0);

    document.getElementById('savingPercent').innerHTML = "You have saved "+savingPercent+"%";  
}

// execute function when window totally loaded
window.onload = function() {
  // do something ...
  calc();
};
</script>

Answer 6

您可以考虑更改此标记它不起作用，因为你的价格和销售价格是100英镑 20英镑，你试图将它们转换成数字，这将导致NAN

检查以下代码段

calc();
function calc()
{
    var price = 0;
    var saleprice = 0;
    var savingPercent = 0;

    price = Number(document.getElementById("price").innerHTML);
  price
    saleprice = Number(document.getElementById("saleprice").innerHTML); 
    savingPercent =(((price - saleprice) / price) * 100).toFixed(0);
    document.getElementById('savingPercent').innerHTML = "You have saved" +savingPercent+"% ";  
}

<div>
  <span>&pound;</span>
<span id="price">100</span>
</div>

<div>
  <span>&pound;</span>
<span id="saleprice">20</span>
</div>

<div id="savingPercent"></div>

另一件事，我在这里独立调用calc（），你可以考虑绑定一个事件来触发calc方法

希望这有帮助

Answer 7

感谢您的帮助，我已经从你们中的一些人那里得到了一些建议并得到了以下的帮助：

<script type="text/javascript">
window.onload=function() {

    var price = 0;
    var saleprice = 0;
    var savingPercent = 0;

    price = Number(document.getElementById("price").innerHTML);
    saleprice = Number(document.getElementById("saleprice").innerHTML); 

    savingPercent =(((price - saleprice) / price) * 100).toFixed(0);
    document.getElementById('savingPercent').innerHTML = "You have saved " +savingPercent+"% ";  
}
</script>

<div>
  <span>&pound;</span>
  <span id="price">100</span>
</div>

<div>
    <span>&pound;</span>
    <span id="saleprice">20</span>
</div>

<div id="savingPercent"></div>

虽然我刚刚意识到我需要定位的课程不是ID＆＃39; s。当我更改为document.getElementsByClassName时，它将停止工作：

<script type="text/javascript">
window.onload=function() {

    var price = 0;
    var saleprice = 0;
    var savingPercent = 0;

    price = Number(document.getElementsByClassName("price").innerHTML);
    saleprice = Number(document.getElementsByClassName("saleprice").innerHTML); 

    savingPercent =(((price - saleprice) / price) * 100).toFixed(0);
    document.getElementsByClassName('savingPercent').innerHTML = "You have saved " +savingPercent+"% ";  
}
</script>

<div>
   <span>&pound;</span>
   <span class="price">100</span>
</div>

<div>
   <span>&pound;</span>
  <span class="saleprice">20</span>
</div>

<div class="savingPercent"></div>

任何人都可以告诉我为什么当它与ID正常工作时它不能用于课程。谢谢。

计算百分比并在div元素中显示结果

7 个答案: