Skip to content

Create Elements by a Click

September 17, 2013

Create <p> element by clicking the butt’s. and by if conditions, set the style of selected paragraph. Objective is familiarize Javascript calling elements and and reating elements through javascript. PHP, CSS, HTML, and JavaScript are used here. All the codes are in the body tag

Simple, Free Image and File Hosting at MediaFire

HTML CODE

  1. <body>
  2. <!– # so that reload in the same page
  3. and return false so that the web address remains the same.
  4. when the mouse is clicking, setup() runs. BOOM–>
  5. <a href=”#” onclick=”return false” onmousedown=”setup();”> CLICK ME</a>
  6. <!– script is placed below so that everything above is loaded
  7. for sure–>
  8. <script type=”text/javascript”>
  9. // the local variable
  10. var i = 0;
  11. // function to call when clicked
  12. function setup(){
  13. // run if i is 0
  14. if( i===’undefined’){
  15. hello(i);
  16. }else
  17. hello(i++)
  18. }
  19. function hello(i){
  20. // create a paragraph tag : <p></p>
  21. var aa = document.createElement(‘p’);
  22. // set the text; also
  23. // you can create HTML Here in the form of a string
  24. aa.innerHTML = “hello sexy”;
  25. // like <p name=’foe’>; thats created here
  26. aa.setAttribute(‘name’, ‘foe’);
  27. // here the aa is created, in the body tag
  28. document.getElementsByTagName(“body”)[0].appendChild(aa);
  29. // if the remainder of i / 2 is 0, then the code exec.
  30. if(i%2==0){
  31. // the value of i represents the index of the aa: the
  32. // created element inside the body
  33. // like <p style=”border:’2px solid black’>
  34. var cc = document.getElementsByName(‘foe’)[i].style;
  35. cc.border = “2px solid black”;
  36. cc.textAlign = “center”;
  37. }
  38. }
  39. </script>
  40. </body>
Advertisements

From → CSS, HTML, JavaScript, PHP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: