CODEWITHSUNDEEP
javascripthtml
user3000496
user3000496

Reputation: 3

I want a number to change in my html document, but by using javascript

I need help with my website, or what you want to call it. The idea is that i have a number, and if a button gets clicked, my number gets added by 1. I have searched the web for hours, and I just can't figure it out. As you can see, I'm pretty new to javascript. I hope you guys would take some time out of the day to help me. Thanks.

<!DOCTYPE html>

<html lang='en'>

<head>
<title></title>
<meta charset='utf-8'>
<link rel="stylesheet" href="buttonClicker" type="text/css" />
</head>

<body>
<script type="text/javascript">
    var clicks = 0;
    function oneClick(){
        var clicks += 1;
    }
    document.write(clicks);
</script>
<br>
<input type="button" value="Click Me!" onclick="oneClick()" />
</body>
</head>

Upvotes: 0

Views: 89

Answers (3)

AlexP
AlexP

Reputation: 36

There are two problems in your code: First, you redefine the clicks variable inside oneClick() function. Since the clicks variable is defined in your first script line, you don't need to define it again inside the function, you can just use it: clicks += 1.

The second problem is that document.write() will replace the content of your html document with what you pass to it, which is not what you want. You need to define a html element that will hold your value, and then write the number to it:

In your html:

<div id='clicks'>0</div>

and in your script:

document.getElementById('clicks').innerHtml = clicks

Edit: Thanks Markasoftware

Upvotes: 0

markasoftware
markasoftware

Reputation: 12662

@ElliotBonneville is correct, but I'll explain some more about why that works. Using var makes something have limited scope to the containing function, or, if it is not in a function, the window. This means that if you use var inside of a function, you won't be able to access that variable outside of that function. E.g.:

function makeScopedVar(){
    var scopedVar='hi';
}
makeScopedVar();
console.log(scopedVar);//will log "undefined" or "null" to the console, not "hi"

when NOT using var to declare the variable, it is declared globally, E.g:

makeGlobalVar(){
    globalVar='hi';
}
makeGlobalVar();
console.log(globalVar);//will log "hi" to the console

Also, variables in functions, if scoped, are completely different than out of function variables. Let me explain:

var trickyVar='hi global';//this uses var, but it isn't in a function so the variable is still created globally
function makeScopedVar(){
    var trickyVar='hi scoped';
}
makeScopedVar();
console.log(trickyVar);//will log "hi global" to the console

As you can see, the function creates a scoped variable because of var, and the other one is global so it generates a completely different variable. In your code, the code inside of the function using var clicks+=1 generates a scoped clicks variable and increments it, but this is seperate from the other variable and therefore it doesn't work as expected. Here is how your code should look:

<script type="text/javascript">
var clicks = 0;
function oneClick(){
    clicks += 1;
    alert(clicks);
}
</script>

I removed document.write and replaced with alert it because...document.write is bad for many reasons. In this example, it would remove the whole page. I also placed it INSIDE the function because otherwise, it would run when the page loads and that is all. Here's a working codepen (inline handlers don't work in jsfiddle): http://codepen.io/anon/pen/ziltn

The reason the the other answer wasn't working for you was because the console.log/alert was outside of the function.

EDIT:

If you would rather have the number of clicks be in an element on the page rather than in an alert box, you simply have to add an element to the page and modify it's content. Include this HTML in the page:

<div id="clickoutput">0</div>

and replace alert(clicks) with document.getElementById('clickoutput').textContent=clicks

Upvotes: 1

Elliot Bonneville
Elliot Bonneville

Reputation: 53311

Remove var from your line var clicks += 1. var is only used when initializing the variable, which you already did outside of your oneClick function.

Upvotes: 2

Related Questions