Javascript write to an DIV and draw graphic (overlay with the text), how to switch

I have an application that requires alternately writing text and also drawing graphics to a DIV (division), using button triggerred functions. It seems that individually they work fine. But once I start to write text to the division, drawing grapgics no longer work, and the existing drawing were clearred.  Please see the attached code, and see the solve and the plot function.

Thanks.
LVL 1
zzhang2006ProfessorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lolly-InkCommented:
Please attach the code. We're all very interested.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zzhang2006ProfessorAuthor Commented:
See the attached code.   I am actually use an alternative, by writing and drawing to two different DIV's.  While this alternative have worked. I really desire the I could have overlayed text and graphic in the same DIV ("Canvas").  Thanks.



<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Triangle Solver</title>
      <script type="text/javascript" src="../wz_jsgraphics.js"></script>
 
      <style type  = "text/css">
           div {background-color: #0000BB; color: white}
      </style>
 
   </head>
 
<body>
 
<table >
     <tr> <td valign="top">
        <div id="Canvas"  style="position: relative; width: 500px; height:400px; overflow: scroll;"> </div>
          </td>
          <td valign="top">
  <div id="diagram"  style="position: relative; width: 200px; height:200px; overflow: scroll;"> </div>
   
          
                        <span style=" color:#0000BB ">
 
                         <strong> Triangle Information </strong>     <br>
                         side  &nbsp &nbsp  &nbsp  &nbsp  &nbsp &nbsp  &nbsp angle &nbsp &nbsp  &nbsp  &nbsp  &nbsp side <br>
                        </span>
                   <form action  = "">
 
                        <p>  <span style=" color:#0000BB ">
  
                               a 
                              
                                                                   
                        <input id = "aa" type = "text" size="4" />
 
                               C
 
                         <input id = "C" type = "text" size="4" />
                               b               
                                                                    
                        <input id = "bb" type = "text" size="4" /> <br>
                                
                        
                            
                                                                     <br> <br>
                         <input type = "button" value = "Solve triangle" 
                         onclick = "solve()" />
 
 
                         <input type = "button" value = "Draw diagram" 
                         onclick = "plot()" /><br /> <br>
                             </span>
                       
                         </p>
                    </form>
 
          </td>
     </tr>
 
</table>
 
 <script type = "text/javascript">
      <!--
         var a_div = document.getElementById("diagram");
         var jg = new jsGraphics(a_div);
             jg.setStroke(3);
       
            
           // Global data for the trianle a, b, and C, given
           var a_side;
           var b_side;
           var C_angle;
 
           // to be computed by solve()
           var c_side;
           var A_angle;
           var B_angle; 
           
           // call the function
           
          
           function solve()
           {
                  document.all.Canvas.innerText = "Solution: ";
                
                  var CInput = document.getElementById("C");
                  var C = CInput.value;
                      C = parseFloat(C);
 
                  
 
                  var aInput = document.getElementById("aa");
                  var a = aInput.value;
                      a = parseFloat(a);
 
                  var bInput = document.getElementById("bb");
                  var b = bInput.value;
                      b = parseFloat(b);
 
                 
                  a_side = a;
                  b_side = b;
                  C_angle = C;
 
 
                  //check data
                  if(isNaN(a))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"a\", exit \n "; 
                      return; 
                  }
 
                   //check data
                  if(isNaN(b))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"b\", exit \n ";  
                      return;
                  }
 
                        //check data
                  if(isNaN(C))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"C\", exit \n ";
                      return;  
                  }
 
 
 
 
                   
 
                  c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2) - 2*a*b*Math.cos(C*3.1415926/180.0));
                  
                  // Law of Sine, Asin is inverse sine
                  A = Math.asin(Math.sin(C*3.1415926/180.0)*a/c)*180/3.1415926;
                  B = 180 - A - C;
 
                   document.all.Canvas.innerText += "\nGiven: \n"; 
                   document.all.Canvas.innerText += "\na = "+a.toFixed(2);
                   document.all.Canvas.innerText += "\nb = "+b.toFixed(2);
                   document.all.Canvas.innerText += "\nC = "+C.toFixed(2);
 
                   document.all.Canvas.innerText += "\nLaw of Cosine is applied, and we found: \n"; 
                   document.all.Canvas.innerText += "\nc = "+c.toFixed(2);
                   document.all.Canvas.innerText += "\nA = "+A.toFixed(2);
                   document.all.Canvas.innerText += "\nB = "+B.toFixed(2);
 
 
                   //set the global data for the triangle
                   c_side  = c;
                   A_angle = A;
                   B_angle = B; 
                     
                
                   
                  
                 }  // end of solve function
 
 
                 function plot()
                 {
                       // try put C at (300, 300) and  CB = 200
                       // and CA = 200*b/a, obviously
                       
                       XC = 20;
                       YC = 100;
   
                       XB = XC + 100;
                       YB = YC;
 
                       XA = XC + 100*b_side*Math.cos(C_angle*3.1415926/180.0)/a_side;
                       YA = YC - 100*b_side*Math.sin(C_angle*3.1415926/180.0)/a_side;
 
                      
 
                      // now draw lines with these three coordinates
                      jg.clear();
                      jg.setColor("red");
                      jg.drawLine(XC, YC, XB, YB);
                      jg.drawLine(XC, YC, XA, YA);
                      jg.drawLine(XA, YA, XB, YB);
 
                      //don't forget
                      jg.paint();
     
 
                  }
 
         jg.paint();                                 
        // -->
      </script>
 
</body>
</html>

Open in new window

0
Lolly-InkCommented:
I had to download the .js file to test - quick Google search was no problem.
I modified your code so that the triangle is drawn in a div surrounding the text div:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Triangle Solver</title>
      <script type="text/javascript" src="../wz_jsgraphics.js"></script>
 
      <style type  = "text/css">
           div {background-color: #0000BB; color: white}
      </style>
 
   </head>
 
<body>
 
<table >
     <tr> <td valign="top">
<div id="CanvasOuter">
        <div id="Canvas"  style="position: relative; width: 500px; height:400px; overflow: scroll;"> </div>
</div>
          </td>
          <td valign="top">
  <div id="diagram"  style="position: relative; width: 200px; height:200px; overflow: scroll;"> </div>
   
          
                        <span style=" color:#0000BB ">
 
                         <strong> Triangle Information </strong>     <br>
                         side  &nbsp &nbsp  &nbsp  &nbsp  &nbsp &nbsp  &nbsp angle &nbsp &nbsp  &nbsp  &nbsp  &nbsp side <br>
                        </span>
                   <form action  = "">
 
                        <p>  <span style=" color:#0000BB ">
  
                               a 
                              
                                                                   
                        <input id = "aa" type = "text" size="4" />
 
                               C
 
                         <input id = "C" type = "text" size="4" />
                               b               
                                                                    
                        <input id = "bb" type = "text" size="4" /> <br>
                                
                        
                            
                                                                     <br> <br>
                         <input type = "button" value = "Solve triangle" 
                         onclick = "solve()" />
 
 
                         <input type = "button" value = "Draw diagram" 
                         onclick = "plot()" /><br /> <br>
                             </span>
                       
                         </p>
                    </form>
 
          </td>
     </tr>
 
</table>
 
 <script type = "text/javascript">
      <!--
         var a_div = document.getElementById("CanvasOuter");
         var jg = new jsGraphics(a_div);
             jg.setStroke(3);
       
            
           // Global data for the trianle a, b, and C, given
           var a_side;
           var b_side;
           var C_angle;
 
           // to be computed by solve()
           var c_side;
           var A_angle;
           var B_angle; 
           
           // call the function
           
          
           function solve()
           {
                  document.all.Canvas.innerText = "Solution: ";
                
                  var CInput = document.getElementById("C");
                  var C = CInput.value;
                      C = parseFloat(C);
 
                  
 
                  var aInput = document.getElementById("aa");
                  var a = aInput.value;
                      a = parseFloat(a);
 
                  var bInput = document.getElementById("bb");
                  var b = bInput.value;
                      b = parseFloat(b);
 
                 
                  a_side = a;
                  b_side = b;
                  C_angle = C;
 
 
                  //check data
                  if(isNaN(a))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"a\", exit \n "; 
                      return; 
                  }
 
                   //check data
                  if(isNaN(b))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"b\", exit \n ";  
                      return;
                  }
 
                        //check data
                  if(isNaN(C))
                  {
                      document.all.Canvas.innerText += "Non numberical data for \"C\", exit \n ";
                      return;  
                  }
 
 
 
 
                   
 
                  c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2) - 2*a*b*Math.cos(C*3.1415926/180.0));
                  
                  // Law of Sine, Asin is inverse sine
                  A = Math.asin(Math.sin(C*3.1415926/180.0)*a/c)*180/3.1415926;
                  B = 180 - A - C;
 
                   document.all.Canvas.innerText += "\nGiven: \n"; 
                   document.all.Canvas.innerText += "\na = "+a.toFixed(2);
                   document.all.Canvas.innerText += "\nb = "+b.toFixed(2);
                   document.all.Canvas.innerText += "\nC = "+C.toFixed(2);
 
                   document.all.Canvas.innerText += "\nLaw of Cosine is applied, and we found: \n"; 
                   document.all.Canvas.innerText += "\nc = "+c.toFixed(2);
                   document.all.Canvas.innerText += "\nA = "+A.toFixed(2);
                   document.all.Canvas.innerText += "\nB = "+B.toFixed(2);
 
 
                   //set the global data for the triangle
                   c_side  = c;
                   A_angle = A;
                   B_angle = B; 
                     
                
                   
                  
                 }  // end of solve function
 
 
                 function plot()
                 {
                       // try put C at (300, 300) and  CB = 200
                       // and CA = 200*b/a, obviously
                       
                       XC = 20;
                       YC = 100;
   
                       XB = XC + 100;
                       YB = YC;
 
                       XA = XC + 100*b_side*Math.cos(C_angle*3.1415926/180.0)/a_side;
                       YA = YC - 100*b_side*Math.sin(C_angle*3.1415926/180.0)/a_side;
 
                      
 
                      // now draw lines with these three coordinates
                      jg.clear();
                      jg.setColor("red");
                      jg.drawLine(XC, YC, XB, YB);
                      jg.drawLine(XC, YC, XA, YA);
                      jg.drawLine(XA, YA, XB, YB);
 
                      //don't forget
                      jg.paint();
     
 
                  }
 
//         jg.paint();                                 
        // -->
      </script>
 
</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.