Member Avatar for poloblue

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
  • 113 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by poloblue

Dani AI

Generated

Good progress, — and good direction from . Keeping the input in the HTML and using JavaScript only to read its value is simpler, more accessible, and avoids extra DOM juggling. The reliable flow is: select the target list, read and trim() the input, bail on empty values, create a new li, set its safe text content, append it, then clear and focus the input.

Useful reminders and links:

  • Create elements with createElement and attach them with appendChild.
  • Put text into nodes with textContent (safer than innerHTML).
  • Use String.prototype.trim() to detect empty input reliably: trim.

Example pattern (keeps markup and behavior separate):

/* bind once */
document.getElementById('addBtn').addEventListener('click', function () {
  var input = document.getElementById('newItem');
  var value = input.value.trim();
  if (!value) return;
  var li = document.createElement('li');
  li.textContent = value;
  document.getElementById('fruits').appendChild(li);
  input.value = '';
  input.focus();
});

Troubleshooting tips: ensure the script runs after the DOM (put it below the elements or use DOMContentLoaded), target the correct list selector (give the UL an id or use querySelector on #h-contain ul), and watch the console for JS errors. If you want Enter-to-add, listen for the input's keydown and trigger the same handler when e.key === 'Enter'.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

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/

Member Avatar for poloblue

JorgeM,

Thank you very much for your help.

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.