...

View Full Version : Multiple ids in a paragraph?



meridian
07-01-2012, 12:25 PM
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

Philip M
07-01-2012, 02:08 PM
<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.

meridian
07-01-2012, 03: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, 04:08 PM
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, 02: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



<!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, 04:55 PM
It works fine for me. :) Of course, you cannot have two elements with the same id so you must delete the four <p>s.

meridian
07-03-2012, 04: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, 03:18 AM
You have a major goof there. In the form of an extra comma:


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, 08:54 AM
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". :confused::confused:

Old Pedant
07-05-2012, 01: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, 01: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, 08:41 AM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum