CODEWITHSUNDEEP
javascript
The Carpenter
The Carpenter

Reputation: 9

How do you make a button that adds a number

Can someone explain some way for me to change this to actually add the numbers? I am new to coding and also using notepad so its not giving me errors in the syntax.

My JavaScript:

function street() {
    var x=Math.floor(Math.random()*2 + 1);
    var z=document.getElementById("test")
    if (x == 1) {
        alert('This should add 1');
        z.innerhtml = z + 1
    }
    else if (x == 2) {
        alert('This should add 2');
        z.innerhtml = z + 1;
    }
}

And my HTML:

<p>Adding</p>`
<p id="test">0</p>
<button type = "button" onclick "street()">Add</p>

Upvotes: 0

Views: 1141

Answers (4)

Drazen Bjelovuk
Drazen Bjelovuk

Reputation: 5472

z.innerHTML = parseInt(z.innerHTML) + 1; // or 2. And you missed the = after your onclick (along with many other syntactical oversights already pointed out).

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

My own take would be:

function street() {
    var x = Math.floor(Math.random()*2 + 1),
        z = document.getElementById("test"),
        // parses the text of the element, turning it into a base-10 number:
        n = parseInt(z['textContent' || 'innerText'], 10);

    // sets the text of the element to be the sum of
    // the current number + generated number:
    z['textContent' || 'innerText'] = n + x;
}

JS Fiddle demo.

The reason to use parseInt() is because the + operator will either add two numbers together or concatenate two strings. If you mix strings and numbers the type of the number is coerced to be a string, and '1' + 2 > '12'.

Therefore:

1 + 2 // 3
'1' + '2' // '12'
'1' + 2 // '12'
1 + '2' // '12'

My use of ['textContent' || 'innerText'] (W3C approach or MS approach) is to avoid accidentally picking up any serialised HTML elements that might have been appended to the 'test' element.

Incidentally, this line:

var z=document.getElementById("test")

finds a DOM node, not a string; to find the string contained within the DOM node you need to use either textContent, innerText or innerHTML (the latter is the simplest, and most cross-browser compatible, but will fail if the numbers are wrapped in any child elements).

I'd also suggest moving away from obtrusive JavaScript, and binding the event-handler outside of your HTML (this makes future modification easier, since there's less hunting down of onclick event-handlers to modify function-calls); in the first instance this involves giving the button an id by which to select it:

// getting a reference to the DOM node:
var button = document.getElementById('button');

// binding the function to the event of the button being clicked:
button.onclick = street;

JS Fiddle demo.

Alternatively:

// get all the button elements:
var buttons = document.getElementsByTagName('button'),
    // select the first of those elements:
    button = buttons[0];

button.onclick = street;

JS Fiddle demo.

Preferable (under contemporary browsers that implement DOM level 2 and/or 3):

var buttons = document.getElementsByTagName('button'),
    button = buttons[0];

button.addEventListener('click', street);

JS Fiddle demo.

Upvotes: 1

rescuecreative
rescuecreative

Reputation: 3859

I remember when I was new to coding as well. There are a number of issues here.

First of all, your html has to exist before the JavaScript can use it. The browser will load page elements from top to bottom so, without any clever tricks, your JavaScript needs to be below your html.

Second, the onclick attribute is sort of a no-no in the JavaScript world because the way it works is really inefficient. You can actually handle it better through actually JavaScript.

Then there's the matter of the actual code mistakes. Here's how it should look:

<p>Adding</p>
<p id="test">0</p>
<button id="mybutton" type="button">Add</button>

Then it's best to put your JavaScript into its own file, but if you have it on the page you'd do this:

<script>
function street() {
    var x=Math.floor(Math.random()*2 + 1);
    var z=document.getElementById("test");
    if (x === 1) {
        alert('This should add 1');
        z.innerHTML = parseInt(z.innerHTML) + 1;
    }
    else if (x === 2) {
        alert('This should add 2');
        z.innerHTML = parseInt(z.innerHTML) + 2;
    }
}

document.getElementById('mybutton').onclick = street;
</script>

EDIT:

As far as adding the numbers is concerned, when you pull out some innerHTML, it is always in the form of text. When you try to add text to text or a number to text, you always get text. So, for example, "4" + 2 equals "42" and "4" + "2" also equals "42". The purpose of the parseInt function is that it turns your text into an ACTUAL number that can be added to other numbers. When you drop your new number back in to the innerHTML, it is converted back to text again.

Upvotes: 1

davidpett
davidpett

Reputation: 96

<script>
  function street() {
    var x = Math.floor((Math.random() * 2) + 1),
        el = document.getElementById('test'),
        val = parseInt(el.innerHTML, 10);
    el.innerHTML = val + x;
  }
</script>
<p>Adding</p> 
<p id="test">0</p> 
<button type="button" onclick="street()">Add</button>

this will increment the value each time you click the button

Upvotes: 0

Related Questions