Solved

Return of Javascript Write text

Posted on 2008-10-14
9
806 Views
Last Modified: 2011-10-19
Good morning Expert.

Working with script in code section alpha below. For each mouseover
I was writing a function and had 30 odd functions. (In code sectio alpha
I show three.)

Trying to figure out how to wqrite one function to operate all mouseovers.
Trying to write the DIV ids and texts as multiple arguments of one function,
oer code section Bravo but am getting 'undefined'. When I run the code
with just the first ID and text it works but when I add the second it breaks.
Have tried several different syntaxes for second variable pair wiht no success.

Thanks.

Allen


begin Code section Alpha ++++++++++++++++++++++++
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
function writeTextB(txt)
{
document.getElementById("descB").innerHTML=txt;
}
function writeTextC(txt)
{
document.getElementById("descC").innerHTML=txt;
}
</script>
</head>
<body>
<div><img src ="images/BABOK_e.gif" width ="780" height ="600" usemap="#RPM" /></div>
<map id ="RPM" name="RPM">
<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeTextB('Requirements Elicitation')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeTextC('Req_ments Analysis and Doc.')"/>
</map>
<div  id="desc" style="position: absolute; height: auto; width: auto; left: 280px; top: 170px; font-family: arial; "></div>
<div id="descB" style="position: absolute; height: auto; width: auto; left: 235px; top: 252px; font-family: arial; font-size: 12; "></div>
<div id="descC" style="position: absolute; height: auto; width: auto; left: 335px; top: 302px; font-family: arial; font-size: 12; "></div>
</map>
</body>
</html>
end Code section Apha +++++++++++++++

start Code section Bravo +++++++++++++++
<html>
<head>
<script type="text/javascript">

function writeText(txt, desc, txtB, descB)
{
document.getElementById("desc").innerHTML=txt;
document.getElementById("descB").innerHTML=txtB;
}

</script>
</head>
<body>
<div><img src ="images/BABOK_e.gif" width ="780" height ="600" usemap="#RPM" /></div>
<map id ="RPM" name="RPM">
<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeTextB('Requirements Elicitation')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeTextC('Req_ments Analysis and Doc.')"/>
<area shape ="rect" coords ="441,322,622,362" onMouseOver="writeTextD('Solution Assess. & Eval.')"/>

</map>
<div  id="desc" style="position: absolute; height: auto; width: auto; left: 280px; top: 170px; font-family: arial; "></div>
<div id="descB" style="position: absolute; height: auto; width: auto; left: 235px; top: 252px; font-family: arial; font-size: 12; "></div>
<div id="descC" style="position: absolute; height: auto; width: auto; left: 335px; top: 302px; font-family: arial; font-size: 12; "></div>
<div><img src ="images/requirements_types.gif" width ="600" height ="500" usemap="#RT" /></div>
</body>
</html>

end Coe section Bravo




BABOK-e.gif
0
Comment
Question by:9apit
  • 5
  • 4
9 Comments
 
LVL 43

Expert Comment

by:TimCottee
ID: 22711655
Hello 9apit,

What you need is to keep it very simple:

<script type="text/javascript">
function writeText(what,where) {
  document.getElementById(where).innerHTML = what;
}
</script>


















Regards,

TimCottee
0
 

Author Comment

by:9apit
ID: 22711831
I understand the concept you profer If one uses the same ID and txt for all the map spots then the same
txt gets written to the same spot over and over. How does one differentiate the the differeent pairs from each other?
0
 
LVL 43

Expert Comment

by:TimCottee
ID: 22711850
9apit,

This doesn't write to the same spot though, the second parameter is the destination element so it writes specific text to different destination elements dependent on which area you are over.

TimCottee
0
 

Author Comment

by:9apit
ID: 22711909
Still don't understand. In the sentence "This doesn't write to the same spot though, the " to what does 'This' refer? More to the point how should
<script type="text/javascript">
function writeText(txt, desc, txtB, descB)
{
document.getElementById("desc").innerHTML=txt;
document.getElementById("descB").innerHTML=txtB;
}
</script>
be written?

Thanks.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 43

Expert Comment

by:TimCottee
ID: 22711971
9apit,

<script type="text/javascript">
function writeText(what,where) {
  document.getElementById(where).innerHTML = what;
}
</script>

This function writeText takes two parameters:
what = The text that will be written when it is called e.g., "Requirements Planning and Management"
where = The ID of the element where this text will be written e.g., "desc"

That is all there is to it, for each mouseover handler you assign what & where appropriately. You don't need any more parameters, or anything else complicated.

onMouseOver="writeText('Requirements Planning and Management','desc');"

will place the text "Requirements Planning and Management" in the element "desc"

Change any/both of these for your mouseovers and you will have different results for each one.

TimCottee
0
 

Author Comment

by:9apit
ID: 22712932
Hello Tim,
You apparently understand this very well. Perhaps you can either cannot remember what is was like or imagfe what is like to not have the knoweledge and what brought you to the knowledge.

If one has two parameters and use them to identify what goes where in the first ins=tance how does one differentiate between what goes in the first instance, and whre the first instance goes and what goes in the second instance and where the second instance goes?

Thanks
0
 
LVL 43

Expert Comment

by:TimCottee
ID: 22714350
Taking the html I posted above:

<area shape ="rect" coords ="177,145,641,176" onMouseOver="writeText('Requirements Planning and Management','desc')"/>
<area shape ="rect" coords ="259,221,440,262" onMouseOver="writeText('Requirements Elicitation','descB')"/>
<area shape ="rect" coords ="315,270,497,312" onMouseOver="writeText('Req_ments Analysis and Doc.','descC')"/>
<area shape ="rect" coords ="441,322,622,362" onMouseOver="writeText('Solution Assess. & Eval.','descD')"/>


This shows your four areas in the imagemap. Each one has different values for the parameters passed into the writeText function, the first being the "what" and the second being the "where". You can see that the target element (the "where") is different for each area, therefore the function will be called for each mouse-over event but will be writing the message to different elements based on that second parameter.
0
 

Author Comment

by:9apit
ID: 22715265
Good afternoon Mr. Cottee,
Thanks for being patient.
I finally got it. It looks like before the writeText function had only one argument. The way you rewrote
it has two arguments. I also had to refresh my understanding of GetElelmentbyID and innerHTML
but the light bulb finally came on. I think the mouseover allows manipulatuion of the identified element and then uses innerHTML to  change the attribute to the text called What.
Very clever.
Thanks again.

Allen
0
 
LVL 43

Accepted Solution

by:
TimCottee earned 500 total points
ID: 22715357
Allen, you are welcome. It is always difficult to judge just how to pitch a response but I usually get there in the end!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now