div要素のパーセント値を計算して結果を表示

Question

私はpriceとsalepriceの間に保存されたパーセンテージ量を計算し、その結果を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

divタグは値を持っていない、あなたはこのように、innerHTMLプロパティを使用する必要があります。

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

とdivの

Answer 2

の£外を移動する。これは動作しませんNumberだけで変換されるため（"300" =>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 3

RobertAKARobinが言ったように、あなたはどこでも関数を呼び出すために不足しています。また、あなたは価格を正しく得ることはできません。

valueの代わりにinnerHTMLを取得する必要があります。したがって、ブラウザはPund-signで文字列を解析できません。その値を部分文字列にする必要があります。

そして最後に、あなたがそうのように、parseInt()を使用してintに文字列を解析する必要があります

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

Answer 4

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 5

あなたのコード内のいくつかの問題があります。

1. あなたは
2. どこでもcalc関数を呼び出していないIDS priceとsalepriceを持つ要素がHTMLDivElement sがあなたのコードに置かdivタグから発信されています。彼らはvalueという名前のプロパティを持っていません。正しいプロパティはtextContentです。
3. 値の前には£文字があるので、その後に部分文字列のみを入力する必要があります。

以下のスニペットは期待通りに機能しています。

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

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

Answer 6

あなたの価格とsalepriceは£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>

もう一つ、私は独立して、ここで）（計算値を呼び出しています、あなたはこれが

Answer 7

は、すべてのあなたの助けをありがとう、私はからヒントを取っているのに役立ちます

希望のcalcメソッドをトリガーするイベントを結合検討するかもしれません私はちょうど私がクラスでないIDをターゲットにする必要が実現しているが

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

：あなたのいくつかと、それが次のように動作するようになりました。私は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の罰金働いていたとき、それはクラスで動作文句を言わない、なぜ誰も教えてもらえます。ありがとうございました。