Create a region on HTML with changing values

Question

I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ). Please note that this integer is to be supplied by external JavaScript.

Efforts I have put: I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again. My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?

Thank You.

Why use canvas? See [Set content of HTML with Javascript](http://stackoverflow.com/questions/4784568/set-content-of-html-span-with-javascript) — merlin, Jun 16 '14 at 10:07

souvickcse · Accepted Answer · 2014-06-16T10:14:15.977

2

You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.

$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});

edited Jun 16 '14 at 10:14

answered Jun 16 '14 at 10:06

souvickcse

7,742
5
37
64

Would be great if you mention you used jquery instead of vanila javascript. It matters a lot for a beginner IMO. – merlin Jun 16 '14 at 10:10
Thank You for the answer. It helped. Can't upvote. Don't have enough reputation. Hope you will understand. Thank You. :) – user3598251 Jun 21 '14 at 06:48
I think you can upvote and accept it as answer now ;) – souvickcse Jun 21 '14 at 06:52
@user3598251 You can upvote and accept the answer once you get your required reputation, because the answer deverse acceptance. :) – try catch finally Jun 21 '14 at 06:53

score 0 · Answer 2 · answered Jun 16 '14 at 10:17

You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).

JavaScript:

var number = 1;

function IncrementNumber() {
    document.getElementById('num').innerText = number;
    number++;
}

HTML:

<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>

Here is a jsfiddle with an example http://jsfiddle.net/G638z/

Create a region on HTML with changing values

2 Answers2