Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

why my code is not working properly ?

hey i planned to do practice by creating a application which generate a div with heading by clicking on submit button but i m facing problem due to which the div is generated on click and disable automatically....! please help me to solve that problem below is the code ....

<!DOCTYPE html>
<html>
<head>
<title>Profile Application</title>
<link rel="stylesheet" type="text/css" href="profile.css">
</head>
<body>

  <form class="group">
     <h1>Tell us about yourself</h1>

    <!-- <input type="text" name="user_name" id="user_name" placeholder="username"><br>
     <input type="text" name="user_country" id="user_country" placeholder="country"><br>
     <label class="light">Age</label><br>
     <input type="radio" name="user_age" id="over_18"><label for="over_18" class="under_line">Over 18</label><br>
     <input  type="radio" name="user_age" id="under_18"><label for="under_18" class="under_line">Under 18</label><br>-->

      <button type="submit">Display</button>
  </form>
  <section id="compile">

  </section>
  <script type="text/javascript" src ="profile.js"></script>
</body>
</html>

var submit = document.getElementsByTagName('button')[0];
//var username = document.getElementById('user_name');
var display = document.getElementById('compile');

//Function for creating elements
var myprofile = function(){
    console.log("now i m here");
    //creating elements
      var createDiv = document.createElement("div"); //div creations which contain class display
      var heading = document.createElement("h1");
    //modifing elements
       createDiv.className = "display";
       heading.innerText = "MY PROFILE";

    //appending child
    createDiv.appendChild(heading);

     return createDiv;

}
//Function through which we can call other functions  
var process = function(){
    console.log("i reach here");
  //here we're going to create an elements which is responsible to create div
  var execute =  myprofile();
   display.appendChild(execute);

} 
submit.onclick = process;
Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points
Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points

Try to add return false ; at the end of process function.

1 Answer

Steven Parker
Steven Parker
225,712 Points
Steven Parker
Steven Parker
225,712 Points

:point_right: By making your button a "submit" type, you've given it two functions: One is the explicit click handler that calls process(), and the other is the default submit functionality of submitting your form data and then reloading the page (and thus erasing the new elements).

To avoid the second action, just declare your button as a "button" type:

      <button type="button">Display</button>

Then each click adds a new DIV to the compile section (you may want to limit that to just one time).

Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

thnx steven it's working now , can you please help me out here also https://teamtreehouse.com/community/todo-app-javascript