Why am I getting [object HTML ParagraphElement] Returned instead of my number

Question

I have a silly fiddle that I am stuck with, I am trying to take the beginning number and double it every time the x2 button is hit. Instead of this behavior I am getting [object HTML ParagraphElement] returned instead. I am re-learning JavaScript so I am trying to work with just JavaScript, no frameworks etc...

var inputVal = document.getElementById("input").value;
var inputEl = document.getElementById("input");
var doubleButton = function () {
  var sum = 0;
  Number(input);
  sum = input + input;
  inputEl.value = input;
  inputEl.innerText = input;
}
var boom = function () {
  alert("BOOM!!!!! Dont you know you should never press the big red  button")
}
document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
document.getElementById("btnRed").addEventListener("click", boom, false);

<p>Enter a number and click the x2 button to have it doubled</p>
<p id="input">5</p>
<br>
<button id="btnAdd">x2</button>
<br>
<button class="redBtn" id="btnRed">BIG RED BUTTON</button>

here is the link to my actual fiddle http://jsfiddle.net/jpb4815/uynfc1ky/16/

Why is my code returning object and not the number, I thought that I had taken care of that with the number function by converting the input from a string to a number. I have tried a variety of different settings in fiddler the onload, no wrap in body. I have changed the code a multitude of times. I could do it in jQuery but I really want just plain vanilla JavaScript.

You get the input element and store it in `inputVal`, but you use `input` later. `input` is the actual DOM element, hence why you're getting it. — Evan Knowles, Mar 29 '15 at 20:15
Note `innerText` is not standard and won't work on Firefox. Better use `textContent`. — Oriol, Mar 29 '15 at 20:19
Maybe this is what you want: http://jsfiddle.net/BloodyKnuckles/uynfc1ky/22/ — bloodyKnuckles, Mar 29 '15 at 20:25
@bloody knuckles that puts me on the right tract thank you, but I need to keep incrementing each time the button is clicked, so always double the number. I think that I need to update my function. — Guyute, Mar 29 '15 at 20:30

score 1 · Answer 1 · answered Mar 29 '15 at 20:26

Try this:

(function () {
            var inputEl = document.getElementById("input");
            var doubleButton = function () {
                var sum = 0;
                input = Number(inputEl.textContent);
                sum = input + input;
                inputEl.textContent = sum;

            }
            var boom = function () {
                alert("BOOM!!!!! Dont you know you should never press the big red  button")
            }
            document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
            document.getElementById("btnRed").addEventListener("click", boom, false);

        }());

score 1 · Accepted Answer · edited May 23 '17 at 12:06

First your input variable is not instantiated. I'm surprised that passed muster. Here's a bit on that.

So, where to get the initial value? Since a p tag doesn't have a value property, I'm pulling the p tag id'd as input, retrieving the innerHTML property, and running the result through parseInt.

Also, pull document.getElementById into your function so the button will have what it needs each time it's called.

And finally, sum was summed but not assigned to your output.

JSFiddle

(function () {
    var doubleButton = function () {
        var inputEl = document.getElementById("input");
        var inputVal = inputEl.innerHTML;
        var input = parseInt(inputVal, 10);
        var sum = input + input;
        inputEl.innerText = sum;

    }
    var boom = function () {
        alert("BOOM!!!!! Dont you know you should never press the big red button")
    }
    document.getElementById("btnAdd").addEventListener("click", doubleButton, false);
    document.getElementById("btnRed").addEventListener("click", boom, false);
}());

thanks for explaining why my solution was not working, I need tho think more my mark up. — Guyute, Mar 29 '15 at 20:36

Why am I getting [object HTML ParagraphElement] Returned instead of my number

2 Answers2