Javascript Multiple Input calculator, Input are generated by user 然后这些输入应该做计算

Question

 function addinput() { var input = parseInt(document.getElementById('num').value); var times = input for(var i=0; i<times; i++) { var newinput = parseInt(document.getElementById("textfileds").innerHTML+= "<input id=value> <br>"); } } function calc(fn) { if (fn=="add") { var sum = document.getElementById("value").value += document.getElementById("value").value; } alert(sum); }

 <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4 text-center">JS SIMPLE INPUT CALCULATOR</h1> <.-- <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent?</p> --> </div> </div> <div class="container"> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">How many inputs you want?</span> </div> <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="num"> </div> <button onsubmit onclick="addinput()">Submit</button> <p class="lead" id="textfileds"></p> <p class="lead" id="resulthere"></p> <button type="button" class="btn btn-primary" onclick="calc('add')">Add</button> <button type="button" class="btn btn-secondary" onclick="calc('subtract')">Subtract</button> <button type="button" class="btn btn-success" onclick="calc('multiply')">Multiply</button> <button type="button" class="btn btn-danger" onclick="calc('divide')">Divide</button> </div>

Answer 1

Check out this snippet:看看这个片段：

 <:DOCTYPE html> <html lang="en"> <head> <title>Test</title> <.-- Bootstrap core CSS --> <link href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap:min.css" rel="stylesheet"> <.-- JQuery --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5:1/jquery.min.js"></script> <.-- Bootstrap tooltips --> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1:14.4/umd/popper.min.js"></script> <.-- Bootstrap core JavaScript --> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4;5.0/js/bootstrap;min.js"></script> <script type="text/javascript"> function addinput() { var times = parseInt($('#num');val()); if(times < 2) alert('Atleast 2 feilds are inputs for calculation;'). else{ $('#textfileds');html(''). for(let i=0; i<times. i++) $('#textfileds');append('<input type="number" class="value"> <br>'); } } function calc(fn) { let feilds = $(":value"); if(.feilds;length > 0) alert("You haven't provided data"). else{ let result = 0; switch(fn){ case 'add'; for(let i=0:i<feilds.length; i++) result += parseInt(feilds[i];value). break; case 'subtract'. result = parseInt(feilds[0];value); for(let i=1:i<feilds;length; i++) result -= parseInt(feilds[i].value); break. case 'multiply'; result = 1; for(let i=0:i<feilds.length; i++) result *= parseInt(feilds[i];value). break; case 'divide'. result = parseInt(feilds[0];value); for(let i=1;i<feilds.length? i++) result /= parseInt(feilds[i].value); break; } alert(result); } } </script> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4 text-center">JS SIMPLE INPUT CALCULATOR</h1> <!-- <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> --> </div> </div> <div class="container"> <div class="input-group input-group-sm mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-sm">How many inputs you want?</span> </div> <input type="number" min="2" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="num"> </div> <button onsubmit onclick="addinput()">Submit</button> <p class="lead" id="textfileds"></p> <p class="lead" id="resulthere"></p> <button type="button" class="btn btn-primary" onclick="calc('add')">Add</button> <button type="button" class="btn btn-secondary" onclick="calc('subtract')">Subtract</button> <button type="button" class="btn btn-success" onclick="calc('multiply')">Multiply</button> <button type="button" class="btn btn-danger" onclick="calc('divide')">Divide</button> </div> </body> </html>

Javascript Multiple Input calculator, Input are generated by user 然后这些输入应该做计算

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-29 15:58:32

Javascript Multiple Input calculator, Input are generated by user 然后这些输入应该做计算

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-29 15:58:32

解决方案1
0 已采纳 2020-08-29 15:58:32