Javascript形式,计算三个相关变量
Javascript form with calculation of three related variables
基本上,我正在尝试做一些在电子表格中非常简单但在网页中非常复杂(至少对我来说)的事情。
因此,我有 11 种书籍尺寸,每种尺寸可以在 24 到 160 页之间,页面成本因书籍大小而异(3 种不同的成本)。我需要在用户选择下拉选项后给出一本书的总价。
就我而言,如果有人能帮忙,我会义不容辞!
<html>
<head>
<title><!--Sample--></title>
<script type="text/javascript">
<!-- BEGIN HIDING
document.onchange = function( e )
{ e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
if (( t.name ) && ( t.name == 'paginas' ))
{ var thisPhotobook = product.photobook;
var thisPrice = product.price;
var thisPaginas = product.paginas;
var thisTotal = product.total;
thisTotal.value = '$' + t.selectedIndex * parseFloat (thisPrice.value); }
}
// DONE HIDING -->
</script>
</head>
<body>
<br />
<form name="product" action="#" onsubmit="return false;">
<tr align="left">
<td width="118">
<span class="style3">Photobooks</span>
<select name="photobook" size="1">
<option value="129">Pequeño tapa blanda (A5) </option>
<option value="199">Pequeño tapa dura (A5) </option>
<option value="189">Clásico vertical tapa blanda (A4) </option>
<option value="255">Clásico horizontal tapa dura (A4) </option>
<option value="255">Clásico vertical tapa dura (A4) </option>
<option value="189">Cuadrado tapa blanda </option>
<option value="255">Cuadrado tapa dura </option>
<option value="329">Premium </option>
<option value="329">Premium tapa tela </option>
<option value="349">Super Premium (A3) </option>
<option value="349">Super Premium tapa tela (A3) </option>
</select>
<span class="style3">Páginas</span>
<select name="paginas" size="1">
<option>0 </option>
<option value="2">24 </option>
<option value="4">26 </option>
<option value="6">28 </option>
<option value="8">30 </option>
<option value="10">32 </option>
<option value="12">34 </option>
<option value="14">36 </option>
<option value="16">38 </option>
<option value="18">40 </option>
<option value="20">42 </option>
<option value="22">44 </option>
<option value="24">46 </option>
<option value="26">48 </option>
<option value="28">50 </option>
<option value="30">52 </option>
<option value="32">54 </option>
<option value="34">56 </option>
<option value="36">58 </option>
<option value="38">60 </option>
<option value="40">62 </option>
<option value="42">64 </option>
<option value="44">66 </option>
<option value="46">68 </option>
<option value="48">70 </option>
<option value="50">72 </option>
<option value="52">74 </option>
<option value="54">76 </option>
<option value="56">78 </option>
<option value="58">80 </option>
<option value="60">82 </option>
<option value="62">84 </option>
<option value="64">86 </option>
<option value="66">88 </option>
<option value="68">90 </option>
<option value="70">92 </option>
<option value="72">94 </option>
<option value="74">96 </option>
<option value="76">98 </option>
<option value="78">100 </option>
<option value="80">102 </option>
<option value="82">104 </option>
<option value="84">106 </option>
<option value="86">108 </option>
<option value="88">110 </option>
<option value="90">112 </option>
<option value="92">114 </option>
<option value="94">116 </option>
<option value="96">118 </option>
<option value="98">120 </option>
<option value="100">122 </option>
<option value="102">124 </option>
<option value="104">126 </option>
<option value="106">128 </option>
<option value="108">130 </option>
<option value="110">132 </option>
<option value="112">134 </option>
<option value="114">136 </option>
<option value="116">138 </option>
<option value="118">140 </option>
<option value="120">142 </option>
<option value="122">144 </option>
<option value="124">146 </option>
<option value="126">148 </option>
<option value="128">150 </option>
<option value="130">152 </option>
<option value="132">154 </option>
<option value="134">156 </option>
<option value="136">158 </option>
<option value="138">160 </option>
</select>
<span class="style3">Precio por página</span>
<select name="price" >
<option value="2">2 </option>
<option value="2,5">2,5 </option>
<option value="5">5 </option>
</select>
<input name="total" type="text" value="0" size="5" style="text-align: center;" />
</td>
</tr>
</form>
</body>
</html>
下面是一个框架,您可以使用计算进行更新: 带有计算的Javascript表单
我对 HTML 所做的唯一更改是将 id
属性添加到表单元素中(3 个选择和 1 个输入)。id
属性是访问页面上特定元素的现代方式,而不是使用 name
.
就parseFloat
而言,我将price
下拉列表的value
属性更改为使用美式浮点数(句点,而不是逗号)(请原谅我对除美国以外的其他国家/地区使用句点的无知。
此语法用于访问特定元素并获取其值(value
属性):
var priceEl = document.getElementById('price');
price = priceEl.value;
此语法用于添加事件处理程序。对于三个选择中的每一个,我们说当change
事件触发时,运行updatePrice
函数。
priceEl.addEventListener('change', updatePrice, false);
相关文章:
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js)
- 在三个.js中创建球体(例如地球)的磁力线
- 如何使用jqueryAJAX从页面中回调多个变量
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- Javascript:如果有三个变量
- Javascript形式,计算三个相关变量
- 将变量传递给第三个参数的 GSAP TimeLineLite.to() 不起作用
- 如何将这三个变量存储到本地存储中
- 使用java脚本比较三个变量
- 如何对三个不同的变量使用相同的函数
- 如何比较两个变量并设置第三个变量的值
- 在javascript中,比较变量时使用两个等号还是三个等号更好
- 如何查找引用数组的三个变量的重复项
- 我能否创建一个矩阵,它将根据三个输入变量设置两个变量的状态
- 交换时更改img(三个变量)
- 变量赋值 - JavaScript 三个赋值
- 将变量从钛的第一个窗口传递到任何其他(第三个、第五个)窗口