如何获取我的输入以继续添加值

时间：2017-05-27 16:34:58

标签： javascript jquery css 

$(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>

我希望每当我点击一个按钮时，在输入字段中它会根据我点击的按钮文本添加值。

2 个答案:

答案 0 :(得分：1)

您可能需要一个全局变量：

var input="";
function buttonClicked() {
console.log('buttonClicked');
$("#inputField").val((input+=$(this).text()));
}

一些解释：

你在buttonClicked中声明了输入变量。因此在函数运行后会收集垃圾，因此每次单击后输入都会丢失。如果要阻止这种情况，请在全局范围内声明输入全局。然后，您可以将按钮值（+ =）附加到输入，并显示此值。如果您希望输入为数字，则可以执行以下操作：

var input=0;
function buttonClicked() {
console.log('buttonClicked');
$("#inputField").val((input+=+$(this).text()));
}

答案 1 :(得分：1)

我想你是在尝试这个：

注意：只需获取文字的当前值并添加按钮值并退回文字。 

$(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>

相关问题
最新问题