SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)

    Using child nodes and looping out the data? Sounds technical but simple question.

    This isn't for me, it's for a friend, and I've been asked to help.

    I have two arrays. english() and french(), and each contain 10 quotes. I then have this HTML
    Code:
    <p><span class="pnum"> 1</span><span class="phrase"></span></p>
    <p><span class="pnum"> 2</span><span class="phrase"></span></p>
    <p><span class="pnum"> 3</span><span class="phrase"></span></p>
    <p><span class="pnum"> 4</span><span class="phrase"></span></p>
    <p><span class="pnum"> 5</span><span class="phrase"></span></p>
    <p><span class="pnum"> 6</span><span class="phrase"></span></p>
    <p><span class="pnum"> 7</span><span class="phrase"></span></p>
    <p><span class="pnum"> 8</span><span class="phrase"></span></p>
    <p><span class="pnum"> 9</span><span class="phrase"></span></p>
    <p><span class="pnum">10</span><span class="phrase"></span></p>
    Look at the comment in there to see what I need to do. I assume I would use .childNodes to get the end result, but I've never worked with nodes before, how would I reference the 2nd child (aka .phrase) and loop out the array in there?
    Code:
    function eventSource(e) {
       var IE = document.attachEvent ? true:false;
       var DOM = document.addEventListener ? true: false;
       if (IE) return event.srcElement;
       else if (DOM) return e.currentTarget;
    }
    
    function setUpTranslation() {
       var phrases = document.getElementsByTagName("p");
       for (var i=0; i < phrases.length; i++) {
    	//Here I need to reference the second child and change the inner content to french[i]
       }
    }
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what About tihis:
    Code JavaScript:
    function eventSource(e) {
       var IE = document.attachEvent ? true:false;
       var DOM = document.addEventListener ? true: false;
       if (IE) return event.srcElement;
       else if (DOM) return e.currentTarget;
    }
     
    function setUpTranslation() {
       var phrases = document.getElementsByTagName("p");
       for (var i=0; i < phrases.length; i++) {
    	// get ihe current P and than get all the span's, 
    	//select the second one (id=1) and do innerHTML
    	phrases[i].getElementsByTagName("span")[1].innerHTML=english[i]
       }
    }

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works. How would I, upon click, swap out the text for the other language? I don't know how to add onClicks (using unobtrusive JS). I assume the condition ls to check what array is being spat out, and the action would be to swap out the language (using if/else?)
    phrases[i].getElementsByTagName("span")[1].innerHTML=english[i]

    I can't word things properly over the internet, blah. Hopefully you all understand. Thanks so far.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Not to be pushy ..
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Assuming you have the French text in an array, you could do this:

    Code JavaScript:
    function setUpTranslation() {
      var phrases = document.getElementsByTagName("p");
      for (var i=0, j = phrases.length; i < j; i++) {
        phrases[i].onclick = function() {
          this.lastChild.firstChild.nodeValue = french[i];
        }
       }
    }
     
    var french = [
      'un',
      'deux',
      ...
    ];

    Pretending that attachEvent will tell you if IE is being used is NOT correct. Opera supports it too. You should do object detection for whatever it is you directly want to use:

    Code javascript:
    function eventSource(e) {
       return window.event ? window.event.srcElement : e.currentTarget;
    }

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Finished it up earlier this morning right before work, using something like what you have up there.

    Appreciate it .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

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