如何实现输入金额后在对应输入框自动显示等效百分比？

看起来你想实现输入金额后自动显示对应百分比的功能，目前你的代码存在几个关键问题，我来帮你修正并实现需求：

现有代码的问题点 #

• 你用了未定义的object来绑定点击事件，其实我们需要监听输入框的input事件（实时响应输入内容变化），而不是点击事件
• 获取输入框内容应该用value属性，nodeValue不是用来获取输入框值的正确方式
• 对于输入框btnTwo，应该设置它的value而不是innerHTML，输入框的内容是通过value属性控制的
• 当前只判断了6000的固定情况，我们可以写通用逻辑（比如金额/1000得到百分比，符合你给出的6000→6%的规则）

修正后的完整实现代码 #

HTML（做了小优化，保持核心结构）

<!--goal window-->
<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 relative to the percentage<br>you would like to purchase.</h2>
    </div>
    <form action="/action_page.php">
      <div class="pay-section">
        <input class="btn1" type="number" placeholder="$" name="amount">
        <h2 class="equal-sign">=</h2>
        <input class="btn2" type="text" placeholder="%" name="percentage" readonly><br>
      </div>
      <button class="invest-button">invest</button>
    </form>
  </div>
  <hr />
</div>

小优化：把btn1的类型改成number更适合输入金额，btn2设置readonly防止用户手动修改百分比

CSS（保留你原有样式不变）

/* ### goal window ### */
.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 button ### */
.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;
}

JavaScript（核心修正部分）

const amountInput = document.querySelector('.btn1');
const percentageInput = document.querySelector('.btn2');

// 监听输入框的输入事件，实时更新百分比
amountInput.addEventListener('input', function() {
  // 获取输入的金额，转成数字
  const amount = parseInt(this.value);
  // 处理空值或非数字的情况
  if (isNaN(amount)) {
    percentageInput.value = '';
    return;
  }
  // 按照你的规则：金额 / 1000 = 百分比，加上%符号
  const percentage = (amount / 1000) + '%';
  percentageInput.value = percentage;
});

关键说明 #

1. 事件监听：用input事件代替点击事件，用户每输入一个字符就会触发，实现实时同步
2. 值的获取与设置：输入框的内容通过value属性操作，这是表单元素的标准用法
3. 通用逻辑：通过amount / 1000计算百分比，这样输入1000会显示1%，14000显示14%，完全匹配你示例中的规则
4. 边界处理：判断输入是否为有效数字，避免出现NaN的情况

这样修改后，就能实现你想要的「输入特定金额，自动显示对应百分比」的功能啦！

内容的提问来源于stack exchange，提问作者xaiver303