如何使百分比出现在其他输入栏中？

Question

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

const btnOne = document.querySelector('.btn1');

const btnTwo = document.querySelector('.btn2');

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

Answer 1

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

document.getElementById('num-input').addEventListener('input', function(e) {
 let val = e.target.value;
 let percent = parseFloat(val / 1000);
 document.getElementById('percent').value = percent;
})

<input id="num-input" type="number" placeholder="enter a number">
<input id="percent" disabled>
<span>%</span>

如何使百分比出现在其他输入栏中？

How to make a percentage appear in the other input bar?

javascript

numbers

input

percentage