truthsfriend
07-14-2007, 12:35 AM
Hi, and thank you for this forum. I have learned much from it.
I need help getting variables in an external js file to transfer to the html page that uses them. I have an html page that lists verses to memorize, which, when the mouse hovers over a particular verse, a small popup reveals the book reference for that verse, thus giving a check to see if the user has accurately referenced that verse for its source.
I have an external js file (VERSES.js) that houses the verses and popup references sequentially as elements in an array and then writes them to the html document. A simplifed version of what I am using, with only a few verses listed here as an example, and that works beautifully, is given below:
<html>
<head>
<title>MY MEMORY VERSES</title>
<script type = "text/javascript" language="javascript"
src = "VERSES.js">
</script>
<!-- import style sheet -->
<link rel = "stylesheet" href = "VERSES.css">
<body>
<div id="0" onmouseover="popUp(this.id,'1')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="1" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
<div id="2" onmouseover="popUp(this.id,'3')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="3" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
<div id="4" onmouseover="popUp(this.id,'5')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="5" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
</body>
</html>
As I said, this works exactly as I want it to, with the popup being hidden and showing only if the reader hovers the cursor over a particular verse, upon which the popup reveals itself and the reference source for that verse, then disappears again when the mouse leaves that verse's area.
The problem, however, is that, as you can see, I have listed each <div> individually for each verse, because that is the only way I can make the popups work correctly. This is clearly not practical when hundreds of verses are involved (which they are). What I need help with is how to code this so
that I don't have to individually code each <div> with the proper identifier to make the correct popup (array element) pop up when the associated verse is hovered over.
Below is the external javascript used to list the array elements that produce the verses in the html document:
var a = new Array();
a[0] = "I AM who I AM";
a[1] = "Exodus 3:14";
a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
a[3] = "Deut 8:3";
a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
a[5] = "Deut 29:29";
a[6] = "Though he slay me, yet will I trust him!";
a[7] ="Job 13:15";
var b = -2;
for (var i = 0; i <3; i++)
{
b +=2
var writeExternalContent = ' ';
writeExternalContent += '<div id=\'i\' ';
document.write(a[b]) ;
writeExternalContent += '</div><p><br />';
document.write(writeExternalContent);
}
As you can see, every even-numbered array element is a verse, and the following odd element is the associated book reference used for the popup for that verse. This works fine. What I have been unable to figure out is how to make the popups work after using this external js file to write the long list of array values (verses), instead of coding each verse and reference directly in the html file, as in the first example. I have tried a for-loop, which seems the logical way to go, but because it is an external
js file, which also seems the right way to go, I get bogged down in how to transfer the id tags from the external file to the html file.
How do I get the external js file to write to the html file the correct id number into the proper <div> tags so that there is no need to manually write each such <div> tag id number?
This is all on a local computer for now. I hope I posted this code in the proper format for this fourm. I read the instructions for new posters but am unsure of some of them regarding how to post the actual code, and the whole concept of actually participating in a forum is new also. But as I said at the beginning, this is a great place. I have learned much from this forum and have looked at every page in the javascript archives here (over a hundred pages of js-- wow!).
Thank you for your time and help.
-- truthsfriend
I need help getting variables in an external js file to transfer to the html page that uses them. I have an html page that lists verses to memorize, which, when the mouse hovers over a particular verse, a small popup reveals the book reference for that verse, thus giving a check to see if the user has accurately referenced that verse for its source.
I have an external js file (VERSES.js) that houses the verses and popup references sequentially as elements in an array and then writes them to the html document. A simplifed version of what I am using, with only a few verses listed here as an example, and that works beautifully, is given below:
<html>
<head>
<title>MY MEMORY VERSES</title>
<script type = "text/javascript" language="javascript"
src = "VERSES.js">
</script>
<!-- import style sheet -->
<link rel = "stylesheet" href = "VERSES.css">
<body>
<div id="0" onmouseover="popUp(this.id,'1')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="1" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
<div id="2" onmouseover="popUp(this.id,'3')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="3" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
<div id="4" onmouseover="popUp(this.id,'5')"
onmouseout="popHide()" href ="#" >
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<div id ="5" class="popUp">
<script type = "text/javascript" language="javascript">
document.write(a[b]);
b=b+1
</script>
</div>
<p><br /></p><p>
</body>
</html>
As I said, this works exactly as I want it to, with the popup being hidden and showing only if the reader hovers the cursor over a particular verse, upon which the popup reveals itself and the reference source for that verse, then disappears again when the mouse leaves that verse's area.
The problem, however, is that, as you can see, I have listed each <div> individually for each verse, because that is the only way I can make the popups work correctly. This is clearly not practical when hundreds of verses are involved (which they are). What I need help with is how to code this so
that I don't have to individually code each <div> with the proper identifier to make the correct popup (array element) pop up when the associated verse is hovered over.
Below is the external javascript used to list the array elements that produce the verses in the html document:
var a = new Array();
a[0] = "I AM who I AM";
a[1] = "Exodus 3:14";
a[2] = "Man does not live by bread alone but by every word that proceeds from the mouth of God.";
a[3] = "Deut 8:3";
a[4] = "The secret things belong to the Lord our God, but the things revealed belong to us and to our children forever, that we may follow all the words of this law.";
a[5] = "Deut 29:29";
a[6] = "Though he slay me, yet will I trust him!";
a[7] ="Job 13:15";
var b = -2;
for (var i = 0; i <3; i++)
{
b +=2
var writeExternalContent = ' ';
writeExternalContent += '<div id=\'i\' ';
document.write(a[b]) ;
writeExternalContent += '</div><p><br />';
document.write(writeExternalContent);
}
As you can see, every even-numbered array element is a verse, and the following odd element is the associated book reference used for the popup for that verse. This works fine. What I have been unable to figure out is how to make the popups work after using this external js file to write the long list of array values (verses), instead of coding each verse and reference directly in the html file, as in the first example. I have tried a for-loop, which seems the logical way to go, but because it is an external
js file, which also seems the right way to go, I get bogged down in how to transfer the id tags from the external file to the html file.
How do I get the external js file to write to the html file the correct id number into the proper <div> tags so that there is no need to manually write each such <div> tag id number?
This is all on a local computer for now. I hope I posted this code in the proper format for this fourm. I read the instructions for new posters but am unsure of some of them regarding how to post the actual code, and the whole concept of actually participating in a forum is new also. But as I said at the beginning, this is a great place. I have learned much from this forum and have looked at every page in the javascript archives here (over a hundred pages of js-- wow!).
Thank you for your time and help.
-- truthsfriend