CODEWITHSUNDEEP
javascripthtml
Guyute
Guyute

Reputation: 149

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

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.

Upvotes: 0

Views: 62

Answers (2)

bloodyKnuckles
bloodyKnuckles

Reputation: 12089

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);
}());

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

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);

        }());

Upvotes: 1

Related Questions