javascript - 来自 HTML 输入的 JS 输出总和
问题描述
我有这段代码,我试图让“印象数” element.value 随着用户在预算字段中输入而更新,获得结果的最佳做法是什么?展示次数应为预算*350。
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">£</div>
</div>
<input id="budget" type="text" class="form-control" name="campaign_budget" placeholder="100" value="<?php if(!empty($campaign_budget)) { echo $campaign_budget; } ?>">
</div>
<small class="form-text text-muted">You will recieve <span id="impressions">0</span> with this budget.</small>
</div>
解决方案
你可以这样做,我在演示中使用了静态预算值,你可以在这里修改和添加你的 PHP 代码。
const impression = document.getElementById('impressions');
document.getElementById("budget")
.addEventListener('keyup', (e) => {
impression.innerHTML = e.currentTarget.value * 350;
});
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">£</div>
</div>
<input id="budget" type="text" class="form-control" name="campaign_budget" placeholder="100" value="50">
</div>
<small class="form-text text-muted">You will recieve <span id="impressions">0</span> with this budget.</small>
</div>
推荐阅读
- javascript - 如何覆盖 NestJS/TypeORM 的Provider
- javascript - 如何使用angularjs或javascript从数组中获取字符串
- laravel - Laravel Nova:将日期时间转换为可读输出
- hibernate - 使用 Hibernate + EhCache、EhCache 或 NoSql 的性能比较
- php - 发送基于搜索结果的基础时出错
- c - postgresql passwordcheck.c 修改
- testing - 如何为 Android Studio 创建小米模拟器?或者任何其他方式在小米模拟器上测试应用程序?
- robotframework - 如何在机器人框架中使用基于其他元素文本/存在的两个定位器之一
- c# - 当所有值都为空时,WPF隐藏DataGridTemplateColumn
- python - Python Flask - 如果文件扩展名是 xls,则不返回输出