如何更改文本字段 HTML

如何解决如何更改文本字段 HTML

如何通过从销售价格值中减去商品成本值来更改收入文本字段中的值？我已附上当前外观的图像，但我想在编辑前 2 个文本字段后更改“收入”字段中显示的内容。我还附上了我的代码。

<div class="product-section">
  <h3>
    <b>{{ product.productLabel }}</b>
  </h3>
  <label for="sales-price">Sales Price: </label>
  <br>
  <input
    type="text"
    [(ngModel)]="product.salesPrice"
    name="sales-label"
    placeholder="Enter Sales Price"
  />
  <p></p>
  <label for="cogs">Cost of Good: </label>
  <br>
  <input
    type="text"
    [(ngModel)]="product.cogs"
    name="cogs-label"
    placeholder="Enter Cogs"
  />
  <p></p>
  <label for="rev">Revenue: </label>
  <br>
  <input
    type="text"
    [(ngModel)]="product.rev"
    name="rev-label"
    readonly
  />
</div>

解决方法

将 (keyup)="getRev()" 添加到您的销售价格和商品成本输入中。

<div class="product-section">
    <h3>
        <b>{{ product.productLabel }}</b>
    </h3>
    <label for="sales-price">Sales Price: </label>
    <br>
    <input
    type="text"
    [(ngModel)]="product.salesPrice"
    (keyup)="getRev()"
    name="sales-label"
    placeholder="Enter Sales Price"
  />
    <p></p>
    <label for="cogs">Cost of Good: </label>
    <br>
    <input
    type="text"
    [(ngModel)]="product.cogs"
    (keyup)="getRev()"
    name="cogs-label"
    placeholder="Enter Cogs"
  />
    <p></p>
    <label for="rev">Revenue: </label>
    <br>
    <input
    type="text"
    [(ngModel)]="product.rev"
    name="rev-label"
    readonly
  />
</div>

然后在组件的打字稿文件中添加一个函数来处理收入计算。

  getRev() {
    this.product.rev = this.product.cogs - this.product.salesPrice;
  }

你能把getRev()的正文贴出来吗？并且，从 getRev() 中取出引号，以便它调用函数而不是将值设置为文字字符串 'getRev()'

编辑：

有没有办法从我的销售价值中减去齿轮价值？

是的，您可以使用 onchange 处理程序。下面是一个示例，假设您将三个元素的 ID 设置为“cogs”、“sales”和“revs”：

const cogs = document.getElementById('cogs');
const sales = document.getElementById('sales');
const revs = document.getElementById('revs');

cogs.addEventListener('input',(event) => {
   const salesNumber = Number(sales.value);
   const cogsNumber = Number(cogs.value);
   const difference = salesNumber - cogsNumber;

   revs.value = difference;
  });