php - 如果用户输入数字值 - 根据该数字更改成分?
问题描述
我有一个即将进行的项目,客户想要一种在网站中输入数字的方式,然后更改某些内容 - 例如: -
你有多少块奶酪?(1)
然后你需要; 100 克番茄酱 200 克披萨面团 50 克新鲜番茄
-或者-
你有多少块奶酪?(2)
然后你需要; 200g 番茄酱 400g 比萨面团 100g 新鲜番茄
所以它会根据输入的数字来计算,这个数字可以是 1 到 9,999 之间的任何地方,有人需要多少其他东西?
我们的目标是在 Wordpress 中进行开发,因此任何可能这样做的插件链接都会有很大帮助!
希望这是有道理的!
非常感谢!!
解决方案
尝试以这种方式onchange
输入您的数字事件并进行一些计算以将您的文本设置为输出。希望这可以帮助 :)
function updateInput(e) {
// console.log(e);
var val1 = e * 100;
var val2 = e * 200;
var val3 = e * 50;
var msg = document.getElementById("msg");
msg.innerHTML = `<font size="5">${val1} g of Tomato Sauce ${val2} g of Pizza Dough ${val3} g Fresh Tomato</font>`;
;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
How many blocks of cheese do you have? ( (between 1 and 9999): <input id="cheese_block" type="number" name="quantity" min="1" max="9999" onchange="updateInput(this.value)">
<div id="msg"></div>
</body>
</html>
推荐阅读
- javascript - 请求内容已从检查器缓存中逐出
- vaadin - Vaadin 流程:DatePicker setAutoselect(true)
- python - mediapipe 解决方案::FaceDetection
- android - 您尝试使用 Android 上未安装的 firebase 模块
- sql - 如何在 oracle 中根据组中的最小和最大日期获取值?
- docker - 将多容器部署到 AWS 的最佳方式是什么?
- apache - Apache 反向代理配置被忽略
- javascript - 如何获取特定选定项目的数据
- flutter - “错误状态:无法在存根响应中调用 `when`”,“类型 'Null' 不是类型 [...] 的子类型”
- c# - Datatables.net 和 asp.net core WebApi get search[value]