javascript自动计算总价并输出

yienzhu 2011-10-04 01:24:16

不会javascript，求帮忙写javascript自动取值计算总价并输出的代码。谢谢

html，取<select name='us_p'>*<select name='goods_count'>=总价，并输出到页面



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>

	<head>

		<title>test</title>

	</head>

	<body>

	<select name='us_p'>

		<option value='10'>包月卡（30天）</option>

		<option value='30'>季度卡（90天）</option>

		<option value='60'>半年卡（180天）</option>

        <option value='100'>包年卡（365天）</option>

    </select>

    連接數

    <select name='goods_count'>

        <option value='1'>1</option>

        <option value='2'>2</option>

        <option value='3'>3</option>

        <option value='4'>4</option>

        <option value='5'>5</option>

        <option value='6'>6</option>

        <option value='7'>7</option>

        <option value='8'>8</option>

        <option value='9'>9</option>

        <option value='10'>10</option>

    </select>個

	</body>

</html>

...全文

267 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

明悟 2011-10-04

打赏
举报

后面少了个}，你自己加上

明悟 2011-10-04

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>test</title>
</head>
<body>
<select id='us_p' name='us_p' onChange="jisuan()">
<option value='10'>包月卡（30天）</option>
<option value='30'>季度卡（90天）</option>
<option value='60'>半年卡（180天）</option>
<option value='100'>包年卡（365天）</option>
</select>
連接數
<select id='goods_count' name='goods_count'onChange="jisuan()">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>個
<div id="price"></div>

<script>
function jisuan(){
var a=document.getElementById("us_p").value;
var b=document.getElementById("goods_count").value;
var c=a*b;
document.getElementById("price").innerHTML="总计："+c;

</script>

</body>
</html>

yienzhu 2011-10-04

打赏
举报

非常感谢，终于可以了。
[Quote=引用 12 楼 qianzai5765638 的回复:]

哦我刚才测试来着你把那个 alert 那行删了就行
[/Quote]

abcd_ufo 2011-10-04

打赏
举报

哦我刚才测试来着你把那个 alert 那行删了就行

yienzhu 2011-10-04

打赏
举报

非常感谢您的代码，可以正常计算并输出了，但是第一次打开网页会提示[object HTMLSelectElement]。
[Quote=引用 9 楼 qianzai5765638 的回复:]

p

和 c 都是 null 你就没有 id 叫那个名称的
[/Quote]

yienzhu 2011-10-04

打赏
举报

您好，ie下可行，其它浏览器不行。
[Quote=引用 5 楼 hookee 的回复:]

不知道你是怎么测试的, 整个代码拷贝下来测试.
[/Quote]

abcd_ufo 2011-10-04

打赏
举报

p

和 c 都是 null 你就没有 id 叫那个名称的

yienzhu 2011-10-04

打赏
举报

您好，我是整个代码copy测试的，http://219.128.253.242:8888/test2.html

[Quote=引用 5 楼 hookee 的回复:]

不知道你是怎么测试的, 整个代码拷贝下来测试.
[/Quote]

abcd_ufo 2011-10-04

打赏
举报





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<head>

</head>

<html>

    <head>

        <title>test</title>

    </head>

    <body>

    <select name='us_p' id="us_p">

        <option value='10'>包月卡（30天）</option>

        <option value='30'>季度卡（90天）</option>

        <option value='60'>半年卡（180天）</option>

        <option value='100'>包年卡（365天）</option>

    </select>

    連接數

    <select name='goods_count' id="goods_count">

        <option value='1'>1</option>

        <option value='2'>2</option>

        <option value='3'>3</option>

        <option value='4'>4</option>

        <option value='5'>5</option>

        <option value='6'>6</option>

        <option value='7'>7</option>

        <option value='8'>8</option>

        <option value='9'>9</option>

        <option value='10'>10</option>

    </select>個

总价：<span id="total"></span>

    </body>

	<script language="JavaScript"> 

window.onload = function(){

    var p = document.getElementById('us_p');

    var c = document.getElementById('goods_count');

    var t = document.getElementById('total');

	alert(p);

    t.innerHTML = Math.round(parseFloat(p.options[p.selectedIndex].value, 10) * parseFloat(c.options[c.selectedIndex].value, 10) * 100) /100;

    p.onchange = c.onchange = function(){

        var p = document.getElementById('us_p');

        var c = document.getElementById('goods_count');

        var t = document.getElementById('total');

        t.innerHTML = Math.round(parseFloat(p.options[p.selectedIndex].value, 10) * parseFloat(c.options[c.selectedIndex].value, 10) * 100) /100;

    }

}

</script>



</html>

在1楼的基础上改了下 1楼的不支持火狐 ..

明悟 2011-10-04

打赏
举报

你这个看似简单的问题，原来还挺复杂的

hookee 2011-10-04

打赏
举报

不知道你是怎么测试的, 整个代码拷贝下来测试.

yienzhu 2011-10-04

打赏
举报

感谢回复，无法自动计算并输出。
[Quote=引用 3 楼 a87345293 的回复:]

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
……
[/Quote]

明悟 2011-10-04

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>

    <head>

        <title>test</title>

    </head>

    <body>

    <select id='us_p' name='us_p'>

        <option value='10'>包月卡（30天）</option>

        <option value='30'>季度卡（90天）</option>

        <option value='60'>半年卡（180天）</option>

        <option value='100'>包年卡（365天）</option>

    </select>

    連接數

    <select id='goods_count' name='goods_count'>

        <option value='1'>1</option>

        <option value='2'>2</option>

        <option value='3'>3</option>

        <option value='4'>4</option>

        <option value='5'>5</option>

        <option value='6'>6</option>

        <option value='7'>7</option>

        <option value='8'>8</option>

        <option value='9'>9</option>

        <option value='10'>10</option>

    </select>個





<script>

function jisuan(){

   var a=document.getElementById("us_p").value;

   var b=document.getElementById("goods_count").value;

   var c=a*b;

document.write(c);

}

window.onload=jisuan();

</script>



    </body>

</html>

yienzhu 2011-10-04

打赏
举报

感谢您的回复，使用您的代码无法输出总价。下面是我参照其它人写的代码，能输出总价，但是必须点一下文本框。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<html>

<script   language="javascript">   

	function showprice(){

		var price = document.getElementById("us_p");

    	var count = document.getElementById("goods_count");

    	var alltotal = document.getElementById('alltotal');

    	alltotal.value = parseInt(price.value,10) * parseInt(count.value,10);

	}  		

</script>

	<head>

		<title>test</title>

	</head>

	<body>

	<select id='us_p' name='us_p'>

		<option value='10'>包月卡（30天）</option>

		<option value='30'>季度卡（90天）</option>

		<option value='60'>半年卡（180天）</option>

        <option value='100'>包年卡（365天）</option>

    </select>

    連接數

    <select id='goods_count' name='goods_count'>

        <option value='1'>1</option>

        <option value='2'>2</option>

        <option value='3'>3</option>

        <option value='4'>4</option>

        <option value='5'>5</option>

        <option value='6'>6</option>

        <option value='7'>7</option>

        <option value='8'>8</option>

        <option value='9'>9</option>

        <option value='10'>10</option>

    </select>個

    <input type="text" id="alltotal" name="alltotal" onfocus="showprice();" />

    总价：<span id="alltotal"></span>

	</body>

</html>

[Quote=引用 1 楼 hookee 的回复:]

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
……
[/Quote]

hookee 2011-10-04

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

<script language="JavaScript"> 

onload = function(){

	var p = document.getElementById('us_p');

	var c = document.getElementById('goods_count');

	var t = document.getElementById('total');

	t.innerHTML = Math.round(parseFloat(p.options[p.selectedIndex].value, 10) * parseFloat(c.options[c.selectedIndex].value, 10) * 100) /100;

	p.onchange = c.onchange = function(){

		var p = document.getElementById('us_p');

		var c = document.getElementById('goods_count');

		var t = document.getElementById('total');

		t.innerHTML = Math.round(parseFloat(p.options[p.selectedIndex].value, 10) * parseFloat(c.options[c.selectedIndex].value, 10) * 100) /100;

	}

}

</script>

</head>

<html>

    <head>

        <title>test</title>

    </head>

    <body>

    <select name='us_p'>

        <option value='10'>包月卡（30天）</option>

        <option value='30'>季度卡（90天）</option>

        <option value='60'>半年卡（180天）</option>

        <option value='100'>包年卡（365天）</option>

    </select>

    連接數

    <select name='goods_count'>

        <option value='1'>1</option>

        <option value='2'>2</option>

        <option value='3'>3</option>

        <option value='4'>4</option>

        <option value='5'>5</option>

        <option value='6'>6</option>

        <option value='7'>7</option>

        <option value='8'>8</option>

        <option value='9'>9</option>

        <option value='10'>10</option>

    </select>個

总价：<span id="total"></span>

    </body>

</html>