/    Sign up×
Community /Pin to ProfileBookmark

Newbie Question on Buttons and document.write

Copy linkTweet thisAlerts:
Apr 01.2014

Hello,

It’s my first time posting here, so please bear with me. I’m taking a beginners web development program and so I’m trying to figure out some of the tricks and skills of javascript. Here’s my issue:

I want to write some very simple javascript where there’s a button you can click, it’ll run some “while” function, and then print the HTML below the button. The way I have it right now though, I click the button and it takes me to a blank HTML document and writes and HTML there, ultimately erasing everything else on the page. Here’s what my code looks like:

[code=php]<button onclick=”countup();”>Click</button>

<script type=”text/javascript”>
function countup() {
i=0
while (i<=10) {
document.write(“<p>” + i + “</p>”);
i++; }
}
</script>[/code]

For my assignment for school. I have to display about half a dozen variations of this “while” statement. I wanted to be able to have all the buttons ready and the instructor can just click each one and the HTML will write out below the button clicked.

While I’m at it, is there a way to make the HTML all write out on one line?

Thanks to anyone that takes a look at this. I appreciate your time.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyApr 01.2014 — As you found, the document.write() command will erase the content of a page, but only when called after the page has finished loading (if it is called before the page has finished loading it will only insert content).

Now, there are a couple of different ways you could do this. If you add a new [B]<div>[/B] element to your page and give it an [I][B]id[/B][/I] then you can simply add the text to the [B]<div>[/B] element's innerHTML:
[CODE]
<button onclick="countup()">Click</button>
<div id="testID"></div>
<script>
function countup() {
var i = 0;
while(i <= 10) {
document.getElementById("testID").innerHTML += i;
i++;
}
}
</script>
[/CODE]

That also places everything on the same line (but absolutely no spacing). The reason your code does not do this is because each number is inside of a [B]<p>[/B] element, which is a block element by default (meaning it takes up an entire line, whether the inside content fills it or not).

Another method would be to create the elements in the [B]while()[/B] loop dynamically so you end up with something like:
[CODE]
<button onclick="countup()">Click</button>

<script>
function countup() {
var i = 0;
while(i <= 10) {
var $e = document.createElement("span");
$e.innerHTML = i;
document.body.appendChild($e);
i++;
}
}
</script>
[/CODE]
The above method creates a new [B]<span>[/B] element (an inline element so it will stay on the same line) and adds the number from the [B]while()[/B] loop, then places this new element in the [B]<body>[/B].
Copy linkTweet thisAlerts:
@mrjaneauthorApr 01.2014 — The first option made the HTML appear at the very bottom of my page. Not sure why, but I'm sure it has something to do with the other HTML I have going.

The second option, however, was perfect! Thank you so much. This'll clean up my page very nicely.
×

Success!

Help @mrjane spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...