[英]how do i get my input to keep adding values
$(onReady); function onReady() { console.log('log inside of onReady'); $(".calculatorNum").on('click', buttonClicked); }//end of onReady function buttonClicked() { console.log('buttonClicked'); var input = $("#inputField").val($(this).text()); input += input; }
button { height:30px; width:30px } #clearButton{ width:64px } #inputField{ margin-bottom: .5em; height:2em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> <link rel="stylesheet" href="styles/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="scripts/scripts.js" charset="utf-8"></script> </head> <body> <h1>Calculator</h1> <div class="numContainer"> <input id = 'inputField' type="text" placeholder="input"> <br> <button class ='calculatorNum' type="button" name="button">1</button> <button class ='calculatorNum' type="button" name="button">2</button> <button class ='calculatorNum' type="button" name="button">3</button> <button id = 'addButton' class ='calculatorNum' type="button" name="button">+</button> <br> <button class ='calculatorNum' type="button" name="button">4</button> <button class ='calculatorNum' type="button" name="button">5</button> <button class ='calculatorNum' type="button" name="button">6</button> <button id = 'subButton' class ='calculatorNum' type="button" name="button">-</button> <br> <button class ='calculatorNum' type="button" name="button">7</button> <button class ='calculatorNum' type="button" name="button">8</button> <button class ='calculatorNum' type="button" name="button">9</button> <button id = 'multButton' class ='calculatorNum' type="button" name="button">X</button> <br> <button id = 'clearButton' class ='calculatorNum' type="button" name="button">Clear</button> <button class ='calculatorNum' type="button" name="button">/</button> <button class ='calculatorNum' type="button" name="button">=</button> </div> <!-- <button id = 'addButton' class ='calculatorButton' type="button" name="button">+</button> <button id = 'subButton' class ='calculatorButton' type="button" name="button">-</button> <button id = 'multButton' class ='calculatorButton' type="button" name="button">X</button> <button id = 'divButton' class ='calculatorButton' type="button" name="button">/</button> --> </body> </html>
I want that everytime i click on a button, in the input field it keeps adding values according to the text of the button i clicked. 我希望每次单击按钮时,它都会在输入字段中根据我单击的按钮的文本不断添加值。
You probably need a global variable: 您可能需要一个全局变量:
var input="";
function buttonClicked() {
console.log('buttonClicked');
$("#inputField").val((input+=$(this).text()));
}
Some explanations: 一些解释:
Youre declaring the input variable inside of buttonClicked. 您在buttonClicked内部声明了输入变量。 Therefore it is garbage collected after the function has run, so input is lost after each click. 因此,该函数运行后会被垃圾回收,因此每次单击后输入都会丢失。 If you want to prevent this, make input global trough declaring it in the global scope. 如果要防止这种情况,请在全局范围内使输入全局槽声明它。 Then you can append the buttons value ( += ) to input, and show this value. 然后,您可以将按钮值(+ =)附加到输入中,并显示该值。 If you want input to be a Number, you may do: 如果希望输入为数字,则可以执行以下操作:
var input=0;
function buttonClicked() {
console.log('buttonClicked');
$("#inputField").val((input+=+$(this).text()));
}
I think you are trying this: 我认为您正在尝试这样做:
Note: Just get current value of text and add button value and resign to text. 注意:只需获取文本的当前值并添加按钮值并辞职即可。
$(onReady); function onReady() { console.log('log inside of onReady'); $(".calculatorNum").on('click', buttonClicked); }//end of onReady function buttonClicked() { console.log('buttonClicked'); $("#inputField").val($("#inputField").val()+$(this).text()); }
button { height:30px; width:30px } #clearButton{ width:64px } #inputField{ margin-bottom: .5em; height:2em; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Calculator</title> <link rel="stylesheet" href="styles/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="scripts/scripts.js" charset="utf-8"></script> </head> <body> <h1>Calculator</h1> <div class="numContainer"> <input id = 'inputField' type="text" placeholder="input"> <br> <button class ='calculatorNum' type="button" name="button">1</button> <button class ='calculatorNum' type="button" name="button">2</button> <button class ='calculatorNum' type="button" name="button">3</button> <button id = 'addButton' class ='calculatorNum' type="button" name="button">+</button> <br> <button class ='calculatorNum' type="button" name="button">4</button> <button class ='calculatorNum' type="button" name="button">5</button> <button class ='calculatorNum' type="button" name="button">6</button> <button id = 'subButton' class ='calculatorNum' type="button" name="button">-</button> <br> <button class ='calculatorNum' type="button" name="button">7</button> <button class ='calculatorNum' type="button" name="button">8</button> <button class ='calculatorNum' type="button" name="button">9</button> <button id = 'multButton' class ='calculatorNum' type="button" name="button">X</button> <br> <button id = 'clearButton' class ='calculatorNum' type="button" name="button">Clear</button> <button class ='calculatorNum' type="button" name="button">/</button> <button class ='calculatorNum' type="button" name="button">=</button> </div> <!-- <button id = 'addButton' class ='calculatorButton' type="button" name="button">+</button> <button id = 'subButton' class ='calculatorButton' type="button" name="button">-</button> <button id = 'multButton' class ='calculatorButton' type="button" name="button">X</button> <button id = 'divButton' class ='calculatorButton' type="button" name="button">/</button> --> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.