Trying to use Javascript to add new li element to my ordered list, anyone know why this code isn’t working?

by

Some problems there:

  1. You’ve defined a function, but you never call it, so the code inside it never runs.

  2. If you ran it from the script where you have the script tag, it would fail because the elements wouldn’t exist yet.

  3. ” is not the correct quote for an HTML attribute. " is.

If you move your script tag to the end of the body, just before the closing </body> tag, fix the quotes, and you call the function, it works:

function myFunction() {
  var newElement = document.createElement("li");
  newElement.textContent = "I am new";
  var ol = document.getElementById("fruits");
  ol.appendChild(newElement);
}
myFunction();
<h1>Fruit Self</h1>
<ol id="fruits"></ol>
Pick a fruit:
<input type="text" id="newfruit">
<h1>Basket</h1>
<ol id="basket"></ol>

As a non-snippet for clarity:

<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
</head>

<body>
    <h1>Fruit Self</h1>
    <ol id="fruits"></ol>
        Pick a fruit:
    <input type="text" id="newfruit">
    <h1>Basket</h1>
    <ol id="basket"></ol>
    <script type="text/javascript" src="https://stackoverflow.com/questions/40073169/script.js"></script>
</body>
</html>

and

function myFunction() {
  var newElement = document.createElement("li");
  newElement.textContent = "I am new";
  var ol = document.getElementById("fruits");
  ol.appendChild(newElement);
}
myFunction();

Side note: You can and should leave the type off your script tag. The default is JavaScript.

More Related Contents:

  1. Retrieve the position (X,Y) of an HTML element
  2. Check if an element contains a class in JavaScript?
  3. Changing CSS Values with Javascript
  4. HTML Table with vertical rows
  5. Can I apply CSS to the elements within an iframe?
  6. Uncaught TypeError: Cannot read property ‘top’ of undefined
  7. How to get on-screen visible element objects in jQuery? [duplicate]
  8. How to get element by class name
  9. Get the longest text in HTML document using Jquery or javascript
  10. CSS Circle without using background [closed]
  11. Can I hide the HTML5 number input’s spin box?
  12. How to retrieve the display property of a DOM element?
  13. Get selected option text with JavaScript
  14. Add a tooltip to a div
  15. JavaScript DOM: Find Element Index In Container
  16. How to change CSS :root color variables in JavaScript
  17. How to change style of iframe content cross-domain?
  18. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  19. Is innerHTML asynchronous?
  20. Is there any “on DOM change” event? [duplicate]
  21. Save a pre element as PDF with CSS
  22. Center flex item in container, when surrounded by other flex items
  23. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  24. Change the style of :before and :after pseudo-elements? [duplicate]
  25. Javascript-Setting background image of a DIV via a function and function parameter
  26. Remove scrollbar but not scrolling functionality [duplicate]
  27. How can I remove wrapper (parent element) without removing the child?
  28. How do you swap DIVs on mouseover (jQuery)?
  29. How to get a leaflet map canvas to have a 100% height?
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment