dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: I have no idea what is wrong with my code

  1. #1
    Join Date
    Jun 2017
    Posts
    4

    I have no idea what is wrong with my code

    So I decided to make a pretty simple to do list, and wanted to add some functionality. I borrowed some code from w3 schools to get started, but some of the code i added isnt working. the stuff in bold is what i added. It seems like everything below where i added it doesnt even run. is there something wrong with my syntax? or is it something else.
    Code:
    var myNodelist = document.getElementsByTagName("LI");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);
    }
    
    // Click on a close button to hide the current list item
    var close = document.getElementsByClassName("close");
    var i;
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function () {
        var div = this.parentElement;
        div.style.display = "none";
      }
    }
    
    // Add a "checked" symbol when clicking on a list item
    var list = document.querySelector('ul');
    list.addEventListener('click', function (ev) {
      if (ev.target.tagName === 'li') {
        ev.target.classList.toggle('checked');
      }
    }, false);
    var codeditems = localStorage.items;
    //load old items
    if(JSON.parse(codeditems) === null){
      var inputs = [];
    }
    else{
      var inputs = JSON.parse(codeditems);
    }
    //write old items to screen
    /*for(var i = 0; i < inputs.length;){
    var li1 = document.createElement("li");
    var olditem = inputs[i];
    var t1 = document.createTextNode(olditem);
    li1.appendChild(t1);
    document.getElementById("myUL").appendChild(li1);
    var span1 = document.createElement("SPAN");
    var txt1 = document.createTextNode("\u00D7");
    span1.className = "close";
    span1.appendChild(txt1);
    li1.appendChild(span1);
    for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
          var div = this.parentElement;
          div.style.display = "none";
        }
      }*/
    
    // Create a new list item when clicking on the "Add" button
    function newElement() {
      var li = document.createElement("li");
      var inputValue = document.getElementById("myInput").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
    
      if (inputValue === '') {
        alert("You must write something!");
      } else {
        document.getElementById("myUL").appendChild(li);
      }
     inputs[inputs.length] = inputValue;
      var inputsString = JSON.stringify(inputs);
      localStorage.setItem("items", inputsString);
     
      document.getElementById("myInput").value = "";
    
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      li.appendChild(span);
    
      for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
          var div = this.parentElement;
          div.style.display = "none";
        }
      }
      /*inputs[inputs.length+1] = inputValue;
      var inputsString = JSON.stringify(inputs);
      localStorage.setItem("items", inputsString);*/
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,229
    You can't add to an object in the manner you have.

    You have to have the reference as object.property = value;
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jun 2017
    Posts
    4
    Quote Originally Posted by \\.\ View Post
    You can't add to an object in the manner you have.

    You have to have the reference as object.property = value;
    I changes the code to this
    Code:
    inputs.push(inputValue);
      var inputsString = JSON.stringify(inputs);
      localStorage.setItem("items", inputsString);
    It still doesn't work

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,229
    Urm, your still trying to push on to an object which is an array only method... Thats why I answered the way I did, you can not use inputs.push(... its inputs[propertyName] = value;
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jun 2017
    Posts
    4
    Inputs is declared as an array though.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,229
    var inputs = JSON.parse(codeditems); is whatever codeditems is when it is parsed and if this is not properly formed, then you can have problems.

    I saw this var codeditems = localStorage.items; which is what? If you are to parse the item it has to be fist off a properly formatted JSON string to work on.

    Have you reviewed the errors in the console.log of the browser?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Jun 2017
    Posts
    4
    I just ran it through chrome debugger. I have concluded that the declaration of the var inputs is because an error before it in the code is causing it to not run.
    This seems to be the problematic code.
    Code:
    var list = document.querySelector('ul');
    list.addEventListener('click', function (ev) {
      if (ev.target.tagName === 'li') {
        ev.target.classList.toggle('checked');
      }
    }, false);
    And this is the error that goes along with it:
    Uncaught TypeError: Cannot read property 'addEventListener' of null
    at VM606 js.js:23

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,229
    Does var list = document.getElementsByTagName("UL"); solve the problem, reading the error, assuming it relates to the code you posted and your comment about it being the element before which is the document.querySelector in your code.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles