Making a JQuery calculator, changing innerHTML but nothing is happening

Asked 6/7, 2015 at 20:32 Answered 6/7, 2015 at 20:52

Solved javascript jquery html dom innerhtml

I am making a jquery calculator, where by clicking on buttons that represent the numbers and operators on a calculator, the display's innerHTML would change to reflect the buttons clicked.

Below is my code:

  <!doctype html>
  <html>
   <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <title> JQuery Calculator </title>
  </head>
<body>

<style>

    section {
        padding: 2em;
    }

    .display {
        height: 5em;
        color: #333;
    }


</style>

    <section id="calculator">
        <div class="display">

        </div>

        <div id="numbersContainer">
            <table id="numbers">
                <tr>
                    <td>
                        <button class="number" id="one">1</button>
                    </td>
                    <td>    
                        <button class="number" id="two">2</button>
                    </td>
                    <td>
                        <button class="number" id="three">3</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="number" id="four">4</button>
                    </td>
                    <td>    
                        <button class="number" id="five">5</button>
                    </td>
                    <td>
                        <button class="number" id="six">6</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="number" id="seven">7</button>
                    </td>
                    <td>    
                        <button class="number" id="eight">8</button>
                    </td>
                    <td>
                        <button class="number" id="nine">9</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="number" id="zero">0</button>
                    </td>
                </tr>
            </table>
            <table id="operators">
                <tr>
                    <td>
                        <button class="operator" id="plus">+</button>
                    </td>
                    <td>    
                        <button class="operator" id="minus">-</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="operator" id="divide">/</button>
                    </td>
                    <td>
                        <button class="operator" id="times">x</button>
                    </td>
                </tr>
            </table>
        </div>


    </section>

    <script>


        var storedCalculation;

        $('.number, .operator').click( function() {
            var numberOrOperator = event.target.innerHTML;
            storedCalculation+=numberOrOperator;
        });

        var calcScreen = $('.display').innerHTML;
        calcScreen = storedCalculation;


    </script>

</body>
</html>

and here is the jsfiddle of it: http://jsfiddle.net/ynf2qvqw/

Why is the innerHTML of the display class not changing?

Xylon answered 6/7, 2015 at 20:32 Comment(2)

FYI, your button elements don't contain HTML, so you should not use innerHTML. They only have text, so it would be safer to use the text content, probably via $(event.target).text(). – Herzen 6/7, 2015 at 20:38

try codepen.io/mariusbalaj/pen/bGqhI – Footmark 13/7, 2015 at 13:52

http://jsfiddle.net/blaird/ynf2qvqw/2/

        var storedCalculation = '';

        $('.number, .operator').click(function () {
             var numberOrOperator = $(this).html();
            storedCalculation += numberOrOperator;
            $('.display').html(storedCalculation);
         });

You are using innerHTML incorrectly and you are trying to set your value outside of your click function.

Russianize answered 6/7, 2015 at 20:38 Comment(0)

jQuery objects do not have an innerHTML property like native JavaScript HTMLElements. In order to modify a jQuery object's inner HTML, you must use the html() method, like so:

$('.display').html(storedCalculation);

See http://api.jquery.com/html/ for more information.

Michaelmas answered 6/7, 2015 at 20:36 Comment(0)

innerHTML is not a property of jQuery. You can either set the innerHTML by grabbing the DOMElement from your selector:

$('.display').get(0).innerHTML = storedCalculation;

or you can use the jQuery .html() method:

$('.display').html(storedCalculation)

Ineffective answered 6/7, 2015 at 20:38 Comment(1)

$('.display').get(0) is more formal than $('.display')[0]. – Carnes 6/7, 2015 at 20:40

First, you need to set the storedCalculation variable to an initial value for it to work better in general, otherwise the initial value will be "undefined".

var storedCalculation = "";

The next bit stays unaltered:

        $('.number, .operator').click( function() {
            var numberOrOperator = event.target.innerHTML;
            storedCalculation+=numberOrOperator;

Here, you use jQuery html() method. The paramter is the value you want to set, in your case storedCalculation.

            var calcScreen = $('#display1').html(storedCalculation);
        });

Hope I could help!

Longlegged answered 6/7, 2015 at 20:52 Comment(0)

Recommended topics

Hot tags