Javascript 百分比圆帮助+；请再来一点

我正在做一个抵押计算器&我不知道如何显示（房产价格/存款）的百分比，我只能显示我输入房产价格的值

在底部。其他一切都很好。对于此实例，我需要getElementByID的替代项。我尝试设置一个变量（如您所见）

还可以对输出上的“NaN”显示进行修复（我也尝试过修复，但无法修复）

var百分比=pp/dp

并在事件侦听器之前用该变量替换

document.getElementById（'pp'）

还可以对输出上的

“NaN”

显示使用修复程序（我也尝试过修复此问题，但无法修复）

编辑：刚才还意识到圆圈似乎阻塞了

“还款期”

的一些输入字段，我不知道为什么：\

$(".input").on('input',function(){

    var pp = document.getElementById ('pp').value;
    var dp = document.getElementById ('dp').value;
    var ai = document.getElementById ('ai').value;
    var rp = document.getElementById ('rp').value;


    
    var monthly = rp * 12
    var value = pp - dp
    var interest = (value *(ai * 0.138)) / monthly;
    var result = (value / monthly) + interest;
    var percent = pp / dp

    document.getElementById('result').innerHTML = result.toFixed(2);
 



    document.getElementById('pp').addEventListener('change', ({ target }) => {
        let { value: pp }= target;
        if (pp > 100) {
          pp = 100;
        }
        let successValue = (pp/100)*660;
        document.getElementById('circle-percentage').innerHTML= `${pp}%`;
        document.getElementById('success-value').setAttribute('stroke-dasharray', `${successValue}, 660`);
      });
    });

'''

输入：焦点{
大纲：无；
}
按揭计算器
物业价格


押金


年息


还款期


每月还款：


£

这样行吗

$（.input”）.on（'input'，function（）{
var pp=document.getElementById（'pp'）。值；
var dp=document.getElementById（'dp'）。值；
var ai=document.getElementById（'ai'）。值；
var rp=document.getElementById（'rp'）。值；
如果（！pp | | |！dp | |！ai | |！rp）
返回；
每月风险值=卢比*12
var值=pp-dp
风险值利息=（价值*（ai*0.138））/月；
风险值结果=（价值/月）+利息；
变量百分比=（dp/pp*100）.toFixed（3）；//将结果四舍五入到小数点后3位
document.getElementById（'result'）.innerHTML=result.toFixed（2）；
如果（pp>100）{
pp=100；
}
设successValue=（pp/100）*660；
document.getElementById（'circle-percentage'）。innerHTML=`${percent}%`；
document.getElementById（'success-value'）.setAttribute（'stroke-dasharray'，`${successValue}，660`）；
});
表单{
保证金：0自动；
宽度：500px；
高度：600px；
填充：1em；
边框：3px实心#CCC；
边界半径：1米；
背景色：#e6；
}
氢{
文本对齐：居中；
颜色：#BA992F
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
填充：10px；
边界半径：10px；
盒影：3倍
}
表格li+li{
边缘顶部：1米；
}
/*输入字段边框*/
#pp、#dp、#ai、#rp{
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
边界宽度：薄；
框大小：边框框；
}
/*物业价格*/
标签[for=“pp”]{
显示：块；
}
#聚丙烯{
宽度：100%；
}
#输入pp:before{
内容：“；
}
#pp：焦点{
边框：1px实心#BA992F；
颜色：#000000；
} 
/*存款CSS*/
标签[for=“dp”]{
显示：块；
文本对齐：左对齐；
}
#dp{
宽度：50%；
}
.表格组2{
浮动：左；
宽度：90%；
位置：相对位置；
文本对齐：左对齐；
}
#dp：焦点{
边框：1px实心#BA992F；
颜色：#000000；
}
/*年息*/
#表格3{
浮动：左；
位置：相对位置；
}
标签[for=“ai”]{
位置：相对位置；
显示：块；
浮动：左；
宽度：20em；
顶部：15px；
}
#哎{
位置：相对位置；
宽度：45%；
顶部：15px；
}
#ai：焦点{
边框：1px实心#BA992F；
颜色：#000000；
}
/*还款期*/
#表格4{
浮动：对；
宽度：45%；
位置：相对位置；
文本对齐：右对齐；
}
标签[for=“rp”]{
文本对齐：右对齐；
}
#反相{
浮动：对；
位置：相对位置；
顶部：-60px；
宽度：45%；
}
#rp：焦点{
边框：1px实心#BA992F；
颜色：#000000；
}
.rp1{
位置：绝对位置；
右：816px；顶：277px；
}
/*结果*/
.表格组5{
位置：绝对位置；
文本对齐：居中；
底部：0；
宽度：40%；
左：30%；
高度：550px；
}
#结果{
字体大小：30px；
}
标签[for=“n/a”]{
字体大小：25px；
}
标签[for=“result”]{
颜色：#6868；
}
输入：：-webkit外部旋转按钮，
输入：：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
#圈{
宽度：100%；
身高：100%；
尺寸：10px；
变换：旋转（135度）；
高度：200px；
}
#圈百分比{
颜色：#444；
位置：相对位置；
顶部：-122px；
左：213px；
字号：2em；
}
#循环百分比2{
颜色：#444；
位置：相对位置；
顶部：-122px；
左：213px；
字号：5em；
}

输入：焦点{
大纲：无；
}
按揭计算器
物业价格


押金


年息
form {
  margin: 0 auto;
  width: 500px;
  height: 600px;
  padding: 1em;
  border: 3px solid #CCC;
  border-radius: 1em;
  background-color: #e6e6e6;
}

h2{
  text-align: center;
  color: #BA992F
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding:10px;
  border-radius:10px;
  box-shadow:3px
}

form li + li {
  margin-top: 1em;
}


/* Input field borders */

#pp, #dp, #ai, #rp{
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  border-width: thin;
  box-sizing: border-box;
}


/* Property Price CSS */

label[for="pp"] {
  display: block;
}

#pp {
  width: 100%;
}
#input pp:before{
  content: "£";
}

#pp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 } 


/* Deposit CSS */

label[for="dp"] {
  display: block;
  text-align: left;
}

#dp{
  width: 50%;
}

.form-group2 {
  float:left;
  width: 90%;
  position:relative;
  text-align: left;
}

#dp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 


/* Annual Interest CSS */

#form-group3{
  float:left;
  position:relative;
}

label[for="ai"] {
  position: relative;
  display: block;
  float: left;
  width: 20em;
  top: 15px;
}

#ai{
  position: relative;
  width:45%;
  top: 15px;
}

#ai:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 

/* Repayment Period CSS */



#form-group4{
  float:right;
  width: 45%;
  position:relative;
  text-align: right;
}

label[for="rp"] {
  text-align:right;
}


#rp{
  float: right;
  position: relative;
  top: -60px;
  width: 45%;
}

#rp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 
.rp1{
  position:absolute;
  right:816px; top: 277px;
}


/* Result */

.form-group5{
  position:absolute;
  text-align:center;
  bottom:0;
  width:40%;
  left:30%;
  height: 550px;

}

#result{
  font-size: 30px;
}

label[for="n/a"]{
  font-size: 25px;
}

label[for="result"]{
  color: #686868;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#circle {
  width: 100%;
  height: 100%;
  size: 10px;
  transform: rotate(135deg);
  height: 200px;
}
#circle-percentage {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 2em;
}

#circle-percentage2 {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 5em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="Chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <link rel="stylesheet" href="/css/style.css">
    <script src = "/js/jquery-3.6.0.min.js"></script>
    <style>
      input:focus{
          outline: none;
      }
  </style>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-4 offset-md-4">
                <form>
                    <header>
                        <h2 class="number-center"> Mortgage Calculator</h2>
                      </header>
                    
                    <div class="form-group">
                        <label for="pp">Property price</label>
                        <input type="number" id="pp" class="input pp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>  
                    <br>

                    <div class="form-group2">
                        <label for="dp">Deposit</label>
                        <input type="number" id="dp" class="input dp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>   
                    <br>

                    <div class="form-group3">
                      <label for="ai">Annual interest</label>
                      <input type="number" id="ai" class="input ai">
                  </div>   
                  <br>

                  <div class="form-group4">
                    <label for="rp" class="rp1">Repayment period</label>
                    <input type="number" id="rp" class="input rp">
                </div>   
                <br>
                    <div class="form-group5">
                        <label for="result">Monthly Repayments:</label>
                        <br>
                        <label for="n/a">£</label>
                        <output type="number" id="result" class="result">
                    </div>
                    <svg id="circle">
                        <circle r="50" cx="50%" cy="50%" stroke="gray" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                        <circle id="success-value" r="50" cx="50%" cy="50%" stroke="#BA992F" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                      </svg>
                      <div style="position: relative;">
                        <div id="circle-percentage"></div>
                        </div>
                      </div>




                

                    <script src="/js/script.js" charset="UTF-8"> </script>
                </form>
            </div>
        </div>
    </div>
 </div>
 </body>
</ul>





</body>
</html>