[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1991
  • Last Modified:

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.
0
zzhang2006
Asked:
zzhang2006
  • 2
1 Solution
 
Lolly-InkCommented:
Please attach the code. We're all very interested.
0
 
zzhang2006Author 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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now