JavaScript development shopping cart tutorial to implement the plus sign function

First let’s look at the following html code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</body>
</html>

Now let’s write the function of the plus sign The id is a2 Look at the code below

<script type="text/javascript">
            window.onload=function(){
                var input = document.getElementById('id').value; //获取文本框的value值
                var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
                document.getElementById('a2').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            v1=parseInt(v1);
                            document.getElementById('id').value = v1 + 1;
                            document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
                    }
            }
    </script>

First we get the value of the quantity box and get The html content of the total price box, when the plus sign is clicked

Use v1 to receive the value of the quantity box

Note: When the plus sign is clicked, the quantity has changed,

Then we use the parseInt function to convert v1 into a number. The quantity value at this time is already 2

So we use document.getElementById('id').value = v1 + 1;

Then we assign a value to the html of the total price box, and multiply the quantity by the unit price

In this way, when we click the plus sign in the shopping cart, the function of changing the total price has been implemented. The complete code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
    <script type="text/javascript">
            window.onload=function(){
                var input = document.getElementById('id').value; //获取文本框的value值
                var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
                document.getElementById('a2').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            v1=parseInt(v1);
                            document.getElementById('id').value = v1 + 1;
                            document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
                    }
            }
    </script>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</body>
</html>

Next Section

new file

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{width:350px;border:1px solid #eee;text-align:center;}
		.tr2{height:50px;}
		input{width:30px;height:20px;text-align: center;}
		a{text-decoration:none}
	</style>
	<script type="text/javascript">
			window.onload=function(){
				var input = document.getElementById('id').value; //获取文本框的value值
				var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
				document.getElementById('a2').onclick = function(){							
							var v1 = document.getElementById('id').value;
							v1=parseInt(v1);
							document.getElementById('id').value = v1 + 1;
							document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
					}
			}
	</script>
</head>
<body>
		<table cellspacing="0" cellpadding="0" border="1">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总价</th>
			</tr>

			<tr class="tr2">
				<td>手表</td>
				<td id="td">1999</td>
				<td>
					<a href="#" id="a1" class="tp1">-</a>
					<input type="text" value="1" id="id">
					<a href="#" id="a2" class="tp2">+</a>
				</td>
				<td id="td2">1999</td>
			</tr>
		</table>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen