0

Good Afternoon,
I'm stuck in the last part of the assignment, can anyone help me out. The assignment is the following: Create an HTML page with a list of four list items (ordered or unordered), and create a text box and button. When the button is clicked, if there is text in the text box, add the text in the text box as a new item in the list. So far I have this implemented.

list
<!DOCTYPE html>
<html>
      <head>
               <title>HTML5 DOM</title>
               <link rel="stylesheet" href="style.css">
     </head>
     <body>

       <div id="h-contain">
<ul>
      <li><strong>Oranges</strong></li>
      <li><strong>Apples</strong></li>
      <li><strong>Pears</strong></li>
</ul>
</div>
<p><strong>Click the button to create a text field.</strong></p>

<button onclick="buttonFunction()"><strong>Click it</strong></button>

<script>
function buttonFunction() {
        var x = document.createElement("INPUT");
        x.setAttribute("type", "text");
        x.setAttribute("value", "E-Commerce");
        document.body.appendChild(x);
  }
</script>
</body>
</html>

for the css file I have this
#h-contain {
list-style-type: disc;
 padding: 5px 5px 5px 5em;
 margin-bottom: 25px;
 }
2
Contributors
2
Replies
14
Views
3 Years
Discussion Span
Last Post by poloblue
0

Good start and you are close, but it looks like you are a bit confused on the part of the text box and missing a few items. The text box needs to be part of the form already. you dont need to add the text box dynamically. You are only going to add the text that the user types in the text box to your unordered list.

Take a look at this: http://jsfiddle.net/bv8gbxo9/

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.