Javascript 如何使百分比显示在其他输入栏中？

我正在尝试将JaveScript添加到我的html输入栏中，我想要的是当某人在其中一个栏中输入一定数量的钱时，另一个栏中将自动显示相等数量的百分比。例如：在一个框中键入6000将导致另一个框显示6%

const btnOne=document.querySelector（'.btn1'）

const btnTwo=document.querySelector（'.btn2'）

object.addEventListener（“单击”，myScript）；
函数myScript（e）{
e、 预防默认值（）；
如果（btnOne.nodeValue=='6000'）{
btnTwo.innerHTML='6%'；
}
}
目标
6000=6%

抵押的14000.00=14%
抵押救济金
您想购买的百分比
。
= 


投资

/*##########*//*###CSS###*/
.目标窗口{
宽度：96%；
高度：40雷姆；
边界半径：40px；
边缘顶端：2rem；
背景色：rgb（255、255、255）；
盒影：5px10px#8888888；
边框：4倍实心rgb（187183183）；
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
}
.目标窗口容器{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
保证金上限：2.5雷姆；
}
.目标文本{
字号：4rem；
文本对齐：居中；
}
.目标状态和文本{
显示器：flex；
身高：4rem；
对齐项目：居中；
边缘顶端：2rem；
}
.目标编号{
身高：4rem；
边框：4倍实心rgb（187183183）；
}
.保证{
文本对齐：居中；
}
输入{
边框：4倍纯黑；
高度：2em；
}
.等号{
填充：0 8px；
}
1.薪酬科{
显示器：flex；
对齐项目：居中；
}
/*#####投资博顿####*/
.投资按钮{
宽度：100%；
高度：10雷姆；
边界半径：30px；
字号：6rem；
边缘顶部：4rem；
}
人力资源{
宽度：100%；
背景色：黑色；
边框：2件纯黑；
边缘顶部：6雷姆；
}

您实际上只是将特定值硬编码到视图中。您需要做的是获取用户键入的内容，将其转换为其百分比值，并使用新的百分比更新视图。这里有一个例子

document.getElementById（'num-input'）.addEventListener（'input'，function（e）{
设val=e.target.value；
让百分比=浮动（val/1000）；
document.getElementById（'percent'）。value=percent；
})

%

所以。。。。问题是什么？你需要提供更多的细节。现行守则是甚么？6000=6%如何计算？你没有透露任何细节。

object.addEventListener("click", myScript); 

function myScript(e) {
    e.preventDefault();
    if(btnOne.nodeValue === '6000') {
    btnTwo.innerHTML = '<h1>6%</h1>';
    }
}



  <!--goal window-->  <!--html-->
    <div class="goal-window">
<div class="goal-window-container">
    <div class="goal-status-and-text">
    <h2 class="goal-text">goal <br> 6,000 = 6%</h2></div>
    <h4><a><br>pledged of 14,000.00 = 14%</a></h4>
    <div class="pledge"><h2>pledge the amount relitive
     to the percentage<br>you would like to purchase.</h2></div>
        <form action="/action_page.php">
      <div class="pay-section"> 
      <input class="btn1" type="text" placeholder="$" name="lname">
      <h2 class="equal-sign">=</h2> 
      <input class="btn2" type="text" placeholder="%" name="lname"><br>
      </div>    
 <button class="invest-button">invest</button>
</form>
</div>
    </div>

    <hr />
    </div>
  </div> 
</div>



/* ### goal window ### */ /*###CSS###*/

.goal-window {
    width: 96%;
    height: 40rem;
    border-radius: 40px;
    margin-top: 2rem;
    background-color: rgb(255, 255, 255);
    box-shadow: 5px 10px #888888;
    border: 4px solid rgb(187, 183, 183);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.goal-window-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2.5rem;
}

.goal-text {
    font-size: 4rem;
    text-align: center;
}

.goal-status-and-text {
   display: flex;
   height: 4rem;
   align-items: center;
   margin-top: 2rem;
}

.goal-number {
    height: 4rem;
    border: 4px solid rgb(187, 183, 183);
}

.pledge {
    text-align: center;
}

input {
    border: 4px solid black;
    height: 2rem;
}

.equal-sign {
    padding: 0 8px;
}

.pay-section {
    display: flex;
    align-items: center;
}
/* ### invest botton ### */

.invest-button {
    width: 100%;
    height: 10rem;
    border-radius: 30px;
    font-size: 6rem;
    margin-top: 4rem;
}

hr {
    width: 100%;
    background-color: black;
    border: 2px solid black;
    margin-top: 6rem;
}