Multiple ids in a paragraph?

meridian · 07-01-2012, 11:25 AM

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]





[/CODE\

Thanks

Philip M · 07-01-2012, 01:08 PM

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 s

 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.

meridian · 07-01-2012, 02:27 PM

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

Philip M · 07-01-2012, 03:08 PM

Quote:

Originally Posted by meridian

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.

meridian · 07-02-2012, 01:41 PM

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>

Philip M · 07-02-2012, 03:55 PM

It works fine for me.

Of course, you cannot have two elements with the same id so you must delete the four s.

meridian · 07-03-2012, 03:38 AM

Ok. Seems to be working now. I forgot to close a couple of the span tags properly. Thanks for your patience.

Old Pedant · 07-04-2012, 02:18 AM

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.

Philip M · 07-04-2012, 07:54 AM

Quote:

Originally Posted by Old Pedant

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".

Old Pedant · 07-05-2012, 12:00 AM

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.

meridian · 07-05-2012, 12:36 AM

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

Philip M · 07-05-2012, 07:41 AM

Quote:

Originally Posted by Old Pedant

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!