How to change onclick text's position?

Question

Hi guys so I'm new to all this html stuff.

Basically;

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick

When i do this the text shows up under the button. I want it next to the button (right)

How can i do that?

You need to adjust html markup to match to what you want. More detailed info you can find here: http://www.w3schools.com/html/html_intro.asp — Vladimirs, Jul 29 '15 at 15:36
possible duplicate of [Align
elements side by side](http://stackoverflow.com/questions/4938716/align-div-elements-side-by-side) — D4V1D, Jul 29 '15 at 15:36

Shrinivas Pai · Answer 1 · 2015-07-29T15:48:07.753

0

Add display:inline-block to p tag

Try this.

<button onclick="myFunction()">Click me</button>
 <p id="demo" style="display:inline-block"></p>

Fiddle:https://jsfiddle.net/9yqs14p4/

edited Jul 29 '15 at 15:48

answered Jul 29 '15 at 15:35

Shrinivas Pai

7,491
4
29
56

@BozaSatanAdam It will work i have update my answer. Click on the fiddle to see the demo. – Shrinivas Pai Jul 29 '15 at 15:47

tombeynon · Accepted Answer · 2015-07-29T16:00:12.930

0

I'm afraid you need to spend a bit more time learning about this. Realistically you'll need to use CSS to style the HTML that is output by your Javascript.

Both CodeSchool and Codecademy have great tutorials on learning the basics of HTML, CSS and Javascript. You'll need to learn these basics if you want to do this sort of thing yourself.

https://www.codeschool.com/

https://www.codecademy.com/

I've copied your example into a CodePen, which helps to show you the roles played by HTML, CSS and Javascript. As an example, the CSS could be;

http://codepen.io/tombeynon/pen/rVQvMO

button{
    float:left;
    margin-right:5px;
}

#demo{
    float:left;
}

edited Jul 29 '15 at 16:00

answered Jul 29 '15 at 15:37

tombeynon

2,216
1
20
19

I know i need to but it's kinda a homework for me and it appears i couldn't found anything in the websites. – Boza Satan Adam Jul 29 '15 at 15:42
Added an example to try to help a bit more. – tombeynon Jul 29 '15 at 16:00
I owe you one dude. Thanks for help. – Boza Satan Adam Aug 01 '15 at 14:20

score 0 · Answer 3 · answered Jul 29 '15 at 16:49

First of all you have to know, that in HTML there are inline elements, e.g <span> and block elements, e.g <div>. That means, what the word says.

You can test the difference:

// block
<div>div1</div>
<div>div2</div>

// inline
<span>span1</span><span>span2</span>

In the example is used the <p> tag which is a block element. Therefore you see the text below.

<button> is an inline element. If you simply use a span:

<span id="demo"></span>

it works!

How to change onclick text's position?

3 Answers3