Need help with part of a function.

  • (2 Pages)
  • +
  • 1
  • 2

27 Replies - 1109 Views - Last Post: 26 July 2014 - 09:16 PM

#16 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Need help with part of a function.

Posted 26 July 2014 - 06:09 PM

would this be an alternative way to do this?


 var newItem = new Image;
        newItem.src = "newitem.jpg";
        allStories.push(newItem);



Was This Post Helpful? 0
  • +
  • -

#17 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 06:17 PM

I prefer to use brackets with constructors new Image() but, yes, that would push the Image into the array.
Was This Post Helpful? 1
  • +
  • -

#18 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Need help with part of a function.

Posted 26 July 2014 - 06:21 PM

LOL yeah just did..

so still no image added?



function highlightNew() {

    if (getCookie("lastVisit") != null) {

    var lastVisit = new Date(getCookie("lastVisit"));
  } else {
        lastVisit = null; 
   }
    var lastVisit = new Date("August 13, 2013 13:00:00");
    lastVisit = writeDateTime(lastVisit);
    
    var lastDate = document.createElement("span");
    lastDate.id = lastDate;
 
        htmlString = "<span id= 'lastDate'>";
        htmlString += "You last visited on " + lastVisit;
        htmlString += "</span>";
        lastDate.innerHTML = htmlString;
        document.body.appendChild(lastDate);
    
         var allStories = new Array();
    var allStories = Array.prototype.slice.call(document.getElementsByClassName("posttime"));
    for (var i =0; i < allStories.length; i++) {
        
 var storyDate = allStories.slice(9);

        var newItem = new Image();
        newItem.src = "newitem.jpg";
        allStories.push(newItem);
}
    }
}


]

This post has been edited by andrewsw: 26 July 2014 - 06:21 PM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

#19 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 06:28 PM

You shouldn't use allStories.length as the loop condition, because pushing to this array will keep increasing this value, and the loop won't end. Create a variable before entering the loop.
var storiesLen = allStories.length;
for (var i =0; i < storiesLen; i++) {

Quote

so still no image added?

How do you know..? I'll guess that you are somehow expecting the image to appear in the page.

This post has been edited by andrewsw: 26 July 2014 - 06:30 PM

Was This Post Helpful? 1
  • +
  • -

#20 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Need help with part of a function.

Posted 26 July 2014 - 06:33 PM

Would I possibly need to use a createElement to add the image?
Was This Post Helpful? 0
  • +
  • -

#21 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 06:38 PM

Add the image where? I starting by interpreting that you wanted to insert the image into the page, but you said you wanted to insert it into the array :dontgetit:/>

.. as I already mentioned,it would help (a lot..) if you explained clearly what you want to achieve. Do you want to insert the image into the array? (To what end?) Or do you want to insert it into the page?

This post has been edited by andrewsw: 26 July 2014 - 06:39 PM

Was This Post Helpful? 0
  • +
  • -

#22 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Need help with part of a function.

Posted 26 July 2014 - 07:12 PM

This is the question from the book.
"Steve placed the posting times for all articles on the page within the paragraph elements with the class name posttime. Locate all elements with this class name and place them in the allstories.array. For items in the all stories array retrieve the text of the item and slice the text string, starting at the ninth character, to retain only the date the story was posted. Use the date string to create a date object variable named storyDate. For each story test whether the lastVisit variable is less than storyDate. If it is create the following HTML fragment, and then append the inline image as a child of the item in the allStories Array <img src="newitem.jpg"/>
Was This Post Helpful? 0
  • +
  • -

#23 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 07:53 PM

Sounds like you would loop through allStories using appendChild(). I can't guarantee that this is what they are expecting, that's your call.
Was This Post Helpful? 0
  • +
  • -

#24 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 592
  • Joined: 15-March 14

Re: Need help with part of a function.

Posted 26 July 2014 - 07:57 PM

You are just using the array as a reference to help you navigate the page.
<div class="posttime">hi there 12:30</div>
<div class="posttime">hi there 2:30</div>
<div class="posttime">hi there 4:30</div>
... get the array of elements with class name posttime...
allStories = the HTMLCollection for class name posttime...
// Iterate the array.
for(var i = 0; i < allStories.length; i++){
    // get the date from the element
    var date = allStories[i].textContent.substring(9);   // get the text from the element
                                                         // containing the part you are interested in
    ... test the date via a Date object ....

    if(passedTest){   // need to insert image                      
          allStories[i].innerHTML += "<img src ='imageName.jpg'>";
    }
 
}



No need to convert the HTMLCollection to an array. The wording of the question in reference to the array is bad. The HTMLCollection can be thought of as an array, but not as a Javascript array. You do not need to add or remove anything from the element collection.

This post has been edited by Blindman67: 26 July 2014 - 07:58 PM

Was This Post Helpful? 1
  • +
  • -

#25 ssbodyrock  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 72
  • Joined: 08-June 14

Re: Need help with part of a function.

Posted 26 July 2014 - 08:19 PM

So I get the image now but it shows up twice and also shows up where it should not. This is the code I have right now.


function highlightNew() {
  
//test if lastVisit is equal to null 5 if not
    if (getCookie("lastVisit") != null) {
        
    var lastVisit = new Date(getCookie("lastVisit"));
  } else {
        lastVisit = null; 
   }
    var lastVisit = new Date("August 13, 2013 13:00:00");
    lastVisit = writeDateTime(lastVisit);
    
    var lastDate = document.createElement("span");
    lastDate.id = lastDate;
 
        htmlString = "<span id= 'lastDate'>";
        htmlString += "You last visited on " + lastVisit;
        htmlString += "</span>";

        lastDate.innerHTML = htmlString;
        document.body.appendChild(lastDate);
    
         var allStories = new Array();
    var allStories = document.getElementsByClassName("posttime");
    for (var i =0; i < allStories.length; i++) {
        
 var storyDate = allStories[i].textContent.substring(9);
        
    if (lastVisit < storyDate) {
 
        allStories[i].innerHTML += "<img src ='newitem.jpg'>";
}
    }
}





Was This Post Helpful? 0
  • +
  • -

#26 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 09:01 PM

I was going to correct my suggestion to use appendChild() but Blindman67 beat me to it ;). This:
allStories[i].innerHTML += "<img src ='imageName.jpg'>";

is more likely.
Was This Post Helpful? 0
  • +
  • -

#27 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3837
  • View blog
  • Posts: 13,587
  • Joined: 12-December 12

Re: Need help with part of a function.

Posted 26 July 2014 - 09:08 PM

Quote

So I get the image now but it shows up twice and also shows up where it should not.

How many times should it show up? Where does it show?
How big is the image? Perhaps it is large and just appears to be in the wrong place.

Please provide clearer details when asking your questions.
Was This Post Helpful? 0
  • +
  • -

#28 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 592
  • Joined: 15-March 14

Re: Need help with part of a function.

Posted 26 July 2014 - 09:16 PM

Ok there are to many errors in your code to write about it so I have just commented it.

You seem to be lost as to how objects are added to the DOM.

document.body.innerHTML = "<span></span>"; // adds an element to the DOM

document.body.appendChild(document.createElement("span")); // does the same thing. 


You only need to do it once, either via direct HTML insertion (innerHTML) or via the DOM API (appendChild())
Direct insertion is the preferred method as the DOM APIs have to many quirks across browsers to bother with all the extra coding and complexity. Forget appendChild, and createElement etc they slow you down as a coder, and slows your code down.

Here is your code with comment.. Hope I got it right as its a bit rushed.
<script>
function highlightNew() {
  
  if (getCookie("lastVisit") != null) {
      var lastVisit = new Date(getCookie("lastVisit"));
  } else {
      lastVisit = null;
      // should you not be setting a default date here?????
  }
  
  // why is this after the getCookie date the code above is pointless
  // if you overwrite any values you get from the cookie
  var lastVisit = new Date("August 13, 2013 13:00:00");
  
  // This seems strange ????
  lastVisit = writeDateTime(lastVisit);
  
  // why are you creating an element here when you create it via text
  // in a few lines down????
  var lastDate = document.createElement("span");
  // not a good idea to try and set an id to an element you just created
  // and more wrongs, but just remove
  lastDate.id = lastDate;
  
  // dont forget the var keyword as you have a global scope here
  // var htmlString
  htmlString = "<span id= 'lastDate'>";                                               
  htmlString += "You last visited on " + lastVisit;
  htmlString += "</span>";
  
  // should be document.body.innerHTML += htmlString;
  lastDate.innerHTML = htmlString;   // you are adding a span with ID=lastDate to a span with ID= lastDate
  
  
  // do not need this line use the suggestion above.
  document.body.appendChild(lastDate);
  
  // Do not need the next line. as on the line after you completely change its type
  var allStories = new Array();  // remove this line
  
  // good.
  var allStories = document.getElementsByClassName("posttime");
  // good.
  for (var i = 0; i < allStories.length; i++) {
      // good.
      var storyDate = allStories[i].textContent.substring(9);
      
       // bad. story date is a string and lastVist is a Date object
       // you can not compare the two in this context and get the correct result.
      if (lastVisit < storyDate) {
          
          // good.
          allStories[i].innerHTML += "<img src ='newitem.jpg'>";
      }
  }
}


</script>

Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2