javascript - JS计价问题，真不知道哪里错了浏览器也不报错
本文介绍了javascript - JS计价问题，真不知道哪里错了浏览器也不报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
心好累刚学JS怎么稍微复杂点的代码写一个错一个改七八遍还是不对真不知道哪出错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oul=document.getElementById("list");
var oli=oul.getElementsByTagName("li");
for(var i=0;i<oli.length;i++){
fn1(oli[i])
}
function fn1(oli){
var btn1=oli.getElementsByTagName("input")[0];
var ost=oli.getElementsByTagName("strong")[0];
var btn2=oli.getElementsByTagName("input")[1];
var em=oli.getElementsByTagName("em")[0];
var ospan=oli.getElementsByTagName("span")[0];
var n1=Number(ost.innerHTML);
var n2=parseFloat(em.innerHTML);
btn1.onclick=function(){
ost--;
if(ost<0){
ost=0;
}
ost.innerHTML=n1;
ospan.innerHTML=n1*n2+"元";
}
btn2.onclick=function(){
ost++;
ost.innerHTML=n1;
ospan.innerHTML=n1*n2+"元";
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>12.5</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>18</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>9.5</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>6.3</em>
小计：<span>0元</span>
</li>
<li>
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>48.5</em>
小计：<span>0元</span>
</li>
</ul>
<p>商品合计共：0件，共花费了：0元</p>
<p>其中最贵的商品单价是：0元。</p>
</body>
</html>解决方案
我想問題是出在你直接對著元素做運算了
這邊省略其他代碼
// 這是取得元素，不是裡面的值喔～
var ost = oli.getElementsByTagName("strong")[0];
btn1.onclick = function(){
// ost 是一元素，不能直接這樣運算
ost--;
if(ost<0){
ost=0;
}
ost.innerHTML=n1;
ospan.innerHTML=n1*n2+"元";
}可以改成
btn1.onclick = function(){
// 取得 ost 裡面的 值，並轉換類型
var currentNumber = parseInt(ost.innerHTML)
// 這裡用到三元運算子 減一後小於零則返回 0 ，否則返回 currentNumber
ost.innerHTML = --currentNumber < 0 ? 0 : currentNumber;
ospan.innerHTML = n1 * n2 + "元";
}
btn2.onclick = function(){
var currentNumber = parseInt(ost.innerHTML)
ost.innerHTML = ++currentNumber;
ospan.innerHTML = n1 * n2 + "元";
}这篇关于javascript - JS计价问题，真不知道哪里错了浏览器也不报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
