Solved

Return of Javascript Write text

Posted on 2008-10-14
9
827 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Date on a table 16 33
Find out all repos that a user is most active on Github 1 26
Increase counter and attr inside a while loop 15 34
Popup write two lines 3 21
This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

679 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