首页 > 解决方案 > 如果用户输入数字值 - 根据该数字更改成分?

问题描述

我有一个即将进行的项目,客户想要一种在网站中输入数字的方式,然后更改某些内容 - 例如: -

你有多少块奶酪?(1)

然后你需要; 100 克番茄酱 200 克披萨面团 50 克新鲜番茄

-或者-

你有多少块奶酪?(2)

然后你需要; 200g 番茄酱 400g 比萨面团 100g 新鲜番茄

所以它会根据输入的数字来计算,这个数字可以是 1 到 9,999 之间的任何地方,有人需要多少其他东西?

我们的目标是在 Wordpress 中进行开发,因此任何可能这样做的插件链接都会有很大帮助!

希望这是有道理的!

非常感谢!!

标签: phpwordpressplugins

解决方案


尝试以这种方式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>


推荐阅读