javascript取值并自动输出成文本【求助】

yienzhu 2011-10-05 01:11:42

大家好，小弟又来求助了。

问题，下面代码已经可以自动计算总值并输出。

现在打算在优化一下网页的说明，除了计算总价以外，再去2个值自动输出在代码底部的说明里。

1，取<select name='us_p' id="us_p">的值，如果值==包月卡（30天），输出30，以此类推。
2，取<select name='goods_count' id="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=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>

<p>

您的使用时长将被延长<1要输出的地方>天，您可以同时使用<2要输出的地方>个设备连接。

    </body>

    <script language="JavaScript"> 

window.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>

</html>

...全文

167 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

yienzhu 2011-10-09

打赏
举报

搞定了，非常感謝您的幫助。

[Quote=引用 7 楼 llyy112233 的回复:]

把innerText换成innerHTML , firefox下没有innerText属性
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……
[/Quote]

llyy112233 2011-10-09

打赏
举报

把innerText换成innerHTML , firefox下没有innerText属性



<!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>

<p>

您的使用时长将被延长<label id='date'></label>天，您可以同时使用<label id='count'></label>个设备连接。

    </body>

    <script language="JavaScript"> 

window.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;

    //要求没看清楚，这行改下吧

        document.getElementById('date').innerHTML = p.options[p.selectedIndex].innerHTML.match(/\d+/);

        document.getElementById('count').innerHTML = c.options[c.selectedIndex].value;

    }



    //这样初始化更好点吧

    p.onchange();

    c.onchange();

}

</script>

</html>

yienzhu 2011-10-08

打赏
举报

您好，代碼在firefox下失效，有解決辦法嗎？

先謝了～～～

[Quote=引用 4 楼 llyy112233 的回复:]
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=gbk" />
<head>
</h……
[/Quote]

yienzhu 2011-10-05

打赏
举报

哇~~您太厉害了~~万分感谢~~

[Quote=引用 4 楼 llyy112233 的回复:]

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=gbk" />
<head>
</……
[/Quote]

llyy112233 2011-10-05

打赏
举报



<!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>

<p>

您的使用时长将被延长<label id='date'></label>天，您可以同时使用<label id='count'></label>个设备连接。

    </body>

    <script language="JavaScript"> 

window.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;

    //要求没看清楚，这行改下吧

        document.getElementById('date').innerText = p.options[p.selectedIndex].innerText.match(/\d+/);

        document.getElementById('count').innerText = c.options[c.selectedIndex].value;

    }



    //这样初始化更好点吧

    p.onchange();

    c.onchange();

}

</script>

</html>

yienzhu 2011-10-05

打赏
举报

非常感谢您的回复，有个小问题，“<label id='date'></label>天”这里的输出有点问题。

输出的天数应该是充值卡所显示的天数，例如是包月卡就显示30天这样子。

[Quote=引用 2 楼 llyy112233 的回复:]

lz先学好js基础再写。
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=gbk……
[/Quote]

llyy112233 2011-10-05

打赏
举报

lz先学好js基础再写。



<!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>

<p>

您的使用时长将被延长<label id='date'></label>天，您可以同时使用<label id='count'></label>个设备连接。

    </body>

    <script language="JavaScript"> 

window.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;



		document.getElementById('date').innerText = parseFloat(p.options[p.selectedIndex].value, 10);

		document.getElementById('count').innerText = c.options[c.selectedIndex].value;

    }



	//这样初始化更好点吧

	p.onchange();

	c.onchange();

}

</script>

</html>

yienzhu 2011-10-05

打赏
举报

忘记说明输出的地方了



<!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>

<p>

您的使用时长将被延长<1要输出的地方>天，您可以同时使用<2要输出的地方>个设备连接。

    </body>

    <script language="JavaScript"> 

window.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>

</html>