如何更改文本字段 HTML 中的值答案

【问题标题】：How to change value inside textfield HTML如何更改文本字段 HTML 中的值
【发布时间】：2021-05-12 06:02:12
【问题描述】：

如何通过从“销售价格”值中减去“商品成本”值来更改“收入”文本字段中的值？我附上了一张它目前的样子，但我想在编辑前 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>

【问题讨论】：

从getRev() 中去掉引号，以便调用它而不是仅仅设置为文本输入的字符串值。
嘿实际上我不认为我可以访问 getRev() 函数，因为它位于不同的命名 ts 文件中。此外，该行代码无效，因为它完全是白色的。有没有办法从我的销售价值中减去齿轮价值？

标签： javascript html angular typescript textfield

【解决方案1】：

你能发布 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;
  });

【讨论】：

public getRev(): string { const revNum: number = Number(this.salesPrice) - Number(this.cogs);返回 revNum.toString(); }

【解决方案2】：

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

【讨论】：