ショッピングカートの加算および減算効果のJavaScript開発

加算と減算の効果を開発する

HTML コードの一部:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>购物车加减</title>
 <style type="text/css">
 a{
 text-decoration: none;display:block;width:30px;height:30px;
 background:#eee;line-height:30px;font-weight:bolder;
 }
 .body{width:500px;height:300px;background:#ccc;margin:0 auto;text-align:center;padding:80px;}
 #a1{float:left;margin-right:20px;margin-top:2px;text-align:center;}
 form{float:left;}
 form input{width:40px;height:30px;border:1px solid #eee;text-align:center;}
 #a2{float:left;margin-left:20px;margin-top:2px;text-align:center;}
 </style> 
</head>
<body>
 <div>
 <a href="#" id="a1">-</a>
 <form>
 <input type= "text" value="1" id='id'>
 </form>
 <a href="#" id="a2">+</a>
 </div>
</body>
</html>

まず、フォームの入力の値を取得する必要があります。これは 1

var input = document.getElementById('id').value; です。 bilival vilaseマイナスサインをクリックすると、コードは次のとおりですdocument.getElementById（ 'a2'）。 {Alert（ "番号を入力してください"）;

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车加减</title> <style type="text/css"> a{ text-decoration: none;display:block;width:30px;height:30px; background:#eee;line-height:30px;font-weight:bolder; } .body{width:500px;height:300px;background:#ccc;margin:0 auto;text-align:center;padding:80px;} #a1{float:left;margin-right:20px;margin-top:2px;text-align:center;} form{float:left;} form input{width:40px;height:30px;border:1px solid #eee;text-align:center;} #a2{float:left;margin-left:20px;margin-top:2px;text-align:center;} </style> <script type="text/javascript"> window.onload=function(){ var input = document.getElementById('id').value; document.getElementById('a1').onclick = function(){ if(isNaN(document.getElementById('id').value)){ alert("请输入数字"); }else{ if(document.getElementById('id').value>1){ document.getElementById('id').value = parseInt(document.getElementById('id').value) - 1; }else{ document.getElementById('id').value = 1; } } } document.getElementById('a2').onclick = function(){ if(isNaN(document.getElementById('id').value)){ alert("请输入数字"); }else{ var v1 = document.getElementById('id').value; v1=parseInt(v1); document.getElementById('id').value = v1 + 1; } } document.getElementById('id').onblur = function(){ var id = document.getElementById('id').value; if(isNaN(id) || id < 1){ alert("请输入数字"); document.getElementById('id').value = 1; return false; } } } </script> </head> <body> <div> <a href="#" id="a1">-</a> <form> <input type= "text" value="1" id='id'> </form> <a href="#" id="a2">+</a> </div> </body> </html>

提出するリセットコード

自動運転