jQuery: Добавить в html строку при нажатии на кнопку

Question

Я пытаюсь сделать простой калькулятор. У меня есть div, называемый результатом, который я вызвал в jQuery. Всякий раз, когда я нажимаю кнопку (число), я хочу, чтобы это значение добавлялось к строке. После того, как у меня есть строка типа «5 + 2 + 3», я хочу изменить ее на выражение, а затем вернуть результат.

На данный момент все, что я хочу, это добавить значение кнопки в строку.

http://codepen.io/kreitzo/pen/RapEqp

index.html

<div id="calculator"> 
    <button class="value">1</button> 
    <button class="value">2</button> 
    <button class="value">3</button> 
    <button class="value">4</button> 
    <button class="value">5</button> 
    <button class="value">6</button> 
    <button class="value">7</button> 
    <button class="value">8</button> 
    <button class="value">9</button> 
    <button class="value">0</button> 
    <button class="value">+</button> 
    <button class="value">-</button> 
    <button class="value">÷</button> 
    <button class="value">*</button> 

    <div id="result"></div> 
</div> 

script.js

$(document).ready(function(){ 
    var string = $("#result"); 
    string = ""; 
    $(".value").click(function(){ 
    string += $(this).toString(); 
    }); 

}); 

Answer 1

Следующий код позволит вам добавить и вычислить выражение. Есть заполнители, что вы можете использовать одну и ту же логику для других вычислений.

var string = ""; 
$(".value").click(function() 
{ 
    if($(this).text() == "CE") 
    { 
    string = ""; 
     $("#result").text(string); 
    return; 
    } 

    if(("+,-,/,*,=").indexOf($(this).text()) >= 0 && string == "") 
    return false; 

    if($(this).text() == "=" && !isNaN(parseInt(string))) 
    { 
     var calc = 0; 
     var num 
     var add = string.indexOf('+'); 
     var sub = string.indexOf('-'); 
     var mul = string.indexOf('*'); 
     var div = string.indexOf('/'); 

     if(add >= 0) 
     {  
     num = string.split('+');  
     $.each(num,function(i) 
     { 
      calc += parseInt(num[i]); 
     }); 
     }   

     $("#result").text(calc); 
    } 
    else 
    { 
    string += $(this).text(); 
    $("#result").text(string); 
    } 
}); 

Рабочий пример: https://jsfiddle.net/01k9m1qh/1/

Answer 2

попробовать эту функцию

$(".number, .operator").click(function(){ 
    $("#result").append($(this).html()); 
}) 

Answer 3

Попробуйте использовать текст JQuery(), чтобы получить внутренний текст нажатой кнопки. В настоящее время ваш код пытается добавить объект, щелкнув объект, в строку вместо внутреннего текста щелкнувших объектов.

JS

$(document).ready(function(){ 

    var string = ""; 

    $(".value").click(function(){ 
    string += $(this).text().toString(); 
    }); 

}); 

Вот обновленный Codepen, который работает: http://codepen.io/anon/pen/WwpPQY

Answer 4

$(document).ready(function(){ 
$(".value").click(function(){ 
    var string = $("#result").html(); 
    string += $(this).html(); 
    $("#result").html(string); 
    }); 

    });