シンプルなJavaScriptユニティコンバータが動作しない

Question

私は簡単なコンバータを動作させようとしています。現時点では入力フィールドは動作しません。 私はPHPのように価格変数を取得できますか？

<h1 style='font-size:46px'>1 DOLLAR = <p id="currentprice" type="number"><?php $url = "https://api.fixer.io/latest?base=USD"; $json = file_get_contents($url); $json_data = json_decode($json, true); $price = $json_data["rates"]["BRL"]; echo $price; ?></p></h1> 
How many Dollars? 
<input oninput='finalAmountUSD()' onchange='finalAmountUSD()' style='font-size:23px;height:45px' type='number' class="buy buyinput form-control" id='usdamount' required value='0.00000000' tabindex="1" /> 
How many BRL? 
<input oninput='finalAmountBRL()' onchange='finalAmountBRL()' style='font-size:23px;height:45px' type='number' class="buy buyinput form-control" id='brlamount' required value='0.00' tabindex="2" /> 

<script> 
function finalAmountUSD() 
{ 
    x = document.getElementById('currentprice').value; 
    y = document.getElementById('usdamount').value; 
    z = document.getElementById('brlamount').value; 
    document.getElementById('usdamount').value = x * z; 
} 
function finalAmountBRL() 
{ 
    x = document.getElementById('currentprice').value; 
    y = document.getElementById('usdamount').value; 
    z = document.getElementById('brlamount').value; 
    document.getElementById('brlamount').value = x * y; 
} 
</script> 

Answer 1

function finalAmountUSD() 
 
{ 
 
    x = parseFloat(document.getElementById('currentprice').value); 
 
    z = parseFloat(document.getElementById('brlamount').value); 
 
    
 
    document.getElementById('usdamount').value = x * z; 
 
} 
 
function finalAmountBRL() 
 
{ 
 
    x = parseFloat(document.getElementById('currentprice').value); 
 
    z = parseFloat(document.getElementById('usdamount').value); 
 
    
 
    document.getElementById('brlamount').value = x * z; 
 
}

<h1 style='font-size:46px'>1 DOLLAR = <input id="currentprice" type="number" value="0.7">BRL</p></h1> 
 
How many Dollars? 
 
<input onblur='finalAmountBRL()' style='font-size:23px;height:45px' type='number' class="buy buyinput form-control" id='usdamount' required value='0.00000000' tabindex="1" /> 
 
<br/> 
 
How many BRL? 
 
<input onblur='finalAmountUSD()' style='font-size:23px;height:45px' type='number' class="buy buyinput form-control" id='brlamount' required value='0.00' tabindex="2" />

あなたの問題は、あなたのコード内で

<p id="currentprice" type="number"></p> 

から値を取得しようとしているということです

x = document.getElementById('currentprice').value; 

カレンtpriceはpであり、値を持つことはできません。読み取り専用入力でそれを変更しようとする

もう一つの提案：お金の値は整数ではないので、すべての結果に対してparseFloatを使用することをお勧めします。また、あなたはonblurイベントのみを使用する必要があると思います。

Answer 2

この簡単な例を試してみてください。

<script> 
//# <-- access with id 
//. <-- access with a class name 
var value1 = $("#currentprice").html(); // get values from html object 
var value2 = $("#currentprice2").val(); // get values from input 
alert("Value: "+value1); 
</script> 

ID名を繰り返してはいけません。エラーが発生します。