Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    JT9
    JT9 is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    use class variables to populate re-used block of html

    OK I hope I can explain myself, it's not as complicated as it sounds, I just know nothing about JS but I know it can help me! I want to use I guess Javascript objects / classes and html to save re-writing the same html code for every English/Spanish translation:

    So, instead of constantly writing all this out for every word:

    Code:
    <a href="#" onClick="document.getElementById('mi').play()" class="audio"><span class="masculine">Mi</span><span class="feminine">mis </span><br/><span class="english">My</span></a>
    I thought Javascript classes could simplify it. Something like:

    Code:
    function Word(audioFile,masculineWord,feminineWord,englishWord) 
    {
    this.audioFile=audioFile;
    this.masculineWord=masculineWord;
    this.feminineWord=feminineWord;
    this.englishWord=englishWord;
    }
    then a block of html like:
    Code:
    ("<span style='masculine'>" + masculineWord + "</span><br/>" + "<span style='feminine'>" + feminineWord + "</span><br/>" + englishWord);
    that way I could list each new word in a new variable like:
    Code:
    wordMy=new Word("mi","mis","my";)
    wordYour=new Word("tu","tus","your";)
    and so on for hundreds of words.

    Now, how would I write that "wordMy" variable into a div so it pulls in all the html too for that word, and somewhere else in the site write the "wordYour" variable plus html for a different word?

    Hope somebody understands the junk I've just written, but I have a feeling it's a pretty basic JS trick - I just can't find a simplified tutorial... Many, many thanks!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Quote Originally Posted by JT9 View Post
    Hope somebody understands the junk I've just written, but I have a feeling it's a pretty basic JS trick - I just can't find a simplified tutorial... Many, many thanks!
    See the DOM examples on the site in my sig.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    JT9
    JT9 is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the pointer I'll have a thorough read tomorrow


  •  

    Posting Permissions

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