Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Return of Javascript Write text

Posted on 2008-10-14
9
Medium Priority
?
845 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:Allen Pitts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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:Allen Pitts
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:Allen Pitts
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:Allen Pitts
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:Allen Pitts
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 2000 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

What is a Denial of Service (DoS)?

A DoS is a malicious attempt to prevent the normal operation of a computer system. You may frequently see the terms 'DDoS' (Distributed Denial of Service) and 'DoS' used interchangeably, but there are some subtle differences.

Question has a verified solution.

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

This article will show, step by step, how to integrate R code into a R Sweave document
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

661 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