Solved

Return of Javascript Write text

Posted on 2008-10-14
9
819 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

770 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