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 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Multiple ids in a paragraph?

    Apologies for asking such a basic question. How can I make the following
    id outputs display on a single line rather than on top of each other.

    eg. 1 2 3 4
    rather than
    1
    2
    3
    4

    [CODE]
    <p id="nknow"></p>
    <p id="ndknow"></p>
    <p id="ncards"></p>
    <p id="score"></p>

    [/CODE\

    Thanks

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Code:
    <span id="nknow">A</span>
    <span id="ndknow">B</span>
    <span id="ncards">C<span>
    <span id="score">D<span>
    You can of course style the content of the <span>s

    <p> stands for paragraph, which means what it says. Browsers automatically add an empty line before and after a paragraph.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (07-01-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    That's good to know. I seemed to associate span with formatting. Although the output doesn't seem to be working now. I'll have to check my code again. I'm assuming span will work the same as paragraph with the document.getElementById("ndknow").innerHTML ="Incorrect: "+[ndknow];
    type statements. If the id is the same it shouldn't need changing should it?

    Thanks Philip M

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by meridian View Post
    I'm assuming span will work the same as paragraph with the document.getElementById("ndknow").innerHTML ="Incorrect: "+[ndknow];
    type statements. If the id is the same it shouldn't need changing should it?

    Thanks Philip M
    [ndknow] is an object.

    But something like document.getElementById("ndknow").innerHTML ="Incorrect: " + answers[0]; will work fine.

    Do not use the same name/id for an HTML element and a Javascript variable.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (07-02-2012)

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sorry. I must be a slow learner. I tried experimenting with changing the id names as suggested but had no luck. The code below seems to work ok with the paragraph tags but changing to a style tags (in comments ) with the same ids seems to fail. I'm not sure what the difference is.
    Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Japanese Vocab</title>
    </head>
    
    <body>
    
    <h1>Japanese Vocab</h1>
    <p id="japanese"></p>
    <p id="english">&nbsp;</p>
    
    <button onclick="showEnglish()">Answer</button></br>
    <button onclick="know(1)">Know</button>
    <button onclick="dknow(1)">Don't Know</button></br>
    <button onclick="nextWord(-1)">Previous word</button>
    <button onclick="nextWord(1)">Next word</button>
    
    <p id="nknow"></p>
    <p id="ndknow"></p>
    <p id="ncards"></p>
    <p id="score"></p>
    
    <!-- This dosn't seem to work
    <p>&nbsp;</p>
    <span id="nknow"></span>
    <span id="ndknow"></span>
    <span id="ncards"><span>
    <span id="score"><span>
    -->
    
    <script type="text/javascript">
    var words = 
    [
        ["taberu",  "to eat"], 
        ["yomu",    "to read"], 
        ["iku",     "to go"], 
    	["kaku",     "to write"],
    	["nomu",    "to drink"],
    	["kaeru",     "to return"], 
    	["oyogu",     "to swim"],
    	["kuru",    "to come"],
    ];
    
    var cnt = 0;
    var previous = 0;
    var beforethat = 0;
    
    var nknow=0;
    var ndknow=0;
    var totalw=0;
    var percent=0;
    var ncards=0;
    var wordCount = words.length; 
    
    while ((cnt == previous) || (cnt == beforethat)) {
    cnt = Math.floor(Math.random()*5);
    }
    beforethat = previous;
    previous = cnt;
    
    
    function showEnglish()
    {
        document.getElementById("english").innerHTML = words[cnt][1]; 
    }
    function nextWord( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount;
    
        document.getElementById("japanese").innerHTML = words[cnt][0] 
        document.getElementById("english").innerHTML='&nbsp;'; 	
    	
    }
    function know( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    
        document.getElementById("japanese").innerHTML = words[cnt][0] 
        document.getElementById("english").innerHTML='&nbsp;'; 
    	nknow=nknow+1;
    	totalw=nknow+ndknow;
    	ncards=totalw;
    	percent = Math.round(nknow / totalw * 100);	
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
    	document.getElementById("nknow").innerHTML = "Correct: "+[nknow];
    	document.getElementById("ndknow").innerHTML ="Incorrect: "+[ndknow];
    	document.getElementById("ncards").innerHTML ="Cards viewed: "+[ncards];
    }
    function dknow( moveBy )
    {
        cnt = ( cnt + wordCount + moveBy ) % wordCount; 
    
        document.getElementById("japanese").innerHTML = words[cnt][0] 
        document.getElementById("english").innerHTML='&nbsp;'; 
    	ndknow=ndknow+1;
    	totalw=nknow+ndknow;
    	ncards=totalw;
    	percent = Math.round(nknow / totalw * 100);	
        document.getElementById("score").innerHTML = "Score: "+[percent]+"%";
    	document.getElementById("nknow").innerHTML = "Correct: "+[nknow];
    	document.getElementById("ndknow").innerHTML = "Incorrect: "+[ndknow];
    	document.getElementById("ncards").innerHTML = "Cards viewed: "+[ncards];
    }
    nextWord(0);
    
    
    </script>
    </body>
    </html>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    It works fine for me. Of course, you cannot have two elements with the same id so you must delete the four <p>s.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    meridian (07-03-2012)

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Ok. Seems to be working now. I forgot to close a couple of the span tags properly. Thanks for your patience.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    You have a major goof there. In the form of an extra comma:
    Code:
    var words = 
    [
        ["taberu",  "to eat"], 
        ["yomu",    "to read"], 
        ["iku",     "to go"], 
        ["kaku",     "to write"],
        ["nomu",    "to drink"],
        ["kaeru",     "to return"], 
        ["oyogu",     "to swim"],
        ["kuru",    "to come"],
    ];
    That extra comma needs to be removed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    meridian (07-05-2012)

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Old Pedant View Post
    That extra comma needs to be removed.
    And if it is present the script will not work. Yet you said "Seems to be working now".

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No, Philip, it will work in some browsers and partially work in others.

    FireFox and Chrome will ignore the extra comma completely.

    MSIE 9 will allow it but the extra comma ends up producing a null element in the array, so the code would work until you went forward in the array to the null element.

    MSIE 7 will barf on your feet.

    Don't know what MSIE 8 and Safari and other browsers do.

    So it's one of those ugly cases that is not the same cross-browser.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    meridian (07-05-2012)

  • #11
    New Coder
    Join Date
    Jun 2012
    Posts
    26
    Thanks
    25
    Thanked 0 Times in 0 Posts
    No worries. Thanks for pointing that out. I tend to use just firefox when testing the code and it seemed to work ok. I will try to get into the habit of using other browsers I think. I'm starting to see this issue more and more. You would think this stuff would be standardized.

    Thanks

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    Quote Originally Posted by Old Pedant View Post
    No, Philip, it will work in some browsers and partially work in others.
    You tell me something! I have always regarded that extra comma as fatal!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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