javascriptで簡単な足し算マシンを作りました。
3つのデータの値の和をresultエリアに表示します。
さて、inputを数百個に増やしたいと思っています。
その場合まさか手作業でやるわけにはいきません。
しかしどのような処理をするべきなのかわからず、質問させていただきました。
なにとぞ御教示よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>足し算マシン</title> 6 <link rel="stylesheet" href="css.css"> 7</head> 8<body> 9 <div class="container"> 10 11 <div class="input-area"> 12 <input type="text" id="data1" placeholder="data1"> 13 <input type="text" id="data2" placeholder="data2"> 14 <input type="text" id="data3" placeholder="data3"> 15 16 </div> 17 18 <div class="result-area"> 19 <p id="result">ここに結果を表示します</p> 20 </div> 21 22 </div> 23 <script src="js.js"></script> 24</body> 25</html> 26
css
1body { 2 background: #ccc; 3 font-size: 16px; 4 font-family: Arial, sans-serif; 5} 6 7.container { 8 width: 300px; 9 margin: 25px auto; 10 background: #980; 11 padding:30px; 12} 13 14#data1, 15#data2, 16#data3 { 17 display: block; 18 margin-top : 10px; 19 font-size: 14px; 20 box-sizing: border-box; 21 padding: 10px; 22 height: 40px; 23 border-radius: 5px; 24 border: none; 25} 26 27.input-area { 28 font-size: 0; 29 margin-bottom: 20px; 30} 31 32.result-area { 33 background: #8f8; 34 padding: 10px; 35 height: 130px; 36 border-radius: 5px; 37 position: relative; 38} 39 40#result { 41 margin: 0; 42} 43
js
1(function() { 2 'use strict'; 3 4 var var1 = document.getElementById('data1'); 5 var var2 = document.getElementById('data2'); 6 var var3 = document.getElementById('data3'); 7 var result = document.getElementById('result'); 8 9 var notnumeric = true; 10 11 12 function checkInput() { 13 // /^[1-9][0-9]*$/ 14 if ( 15 var1.value.match(/^[1-9][0-9]*$/) !== null && 16 var2.value.match(/^[1-9][0-9]*$/) !== null && 17 var3.value.match(/^[1-9][0-9]*$/) !== null 18 ) { 19 notnumeric = false; 20 } else { 21 notnumeric = true; 22 } 23 } 24 25 window.document.onkeyup = function(event){ 26 var str; 27 28 var pi1 = parseInt(var1.value); 29 var pi2 = parseInt(var2.value); 30 var pi3 = parseInt(var3.value); 31 32 33 34 if (notnumeric === true) { 35 str="計算不可"; 36 result.textContent = str; 37 return; 38 } 39 40 str = pi1+pi2+pi3; 41 42 result.textContent = str; 43 44 }; 45 46 var1.addEventListener('keyup', checkInput); 47 var2.addEventListener('keyup', checkInput); 48 var3.addEventListener('keyup', checkInput); 49})(); 50
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/12 20:38