Q&A
JavaとJavaScriptは全くの別物です.タグ編集してください
初心者ながら、質問させて頂きます。
現在、配列に入っている数値を使ってグラフを描かせ、サーブレットファイルから受けとった数値を使用して図形を作成したいのですが、JavaScriptが実行されていない為、グラフと図形が描かれません。白いcanvasが作成されるのみです。
エラーの原因が良くわからないのですが、canvasにグラフを描かせるにはどこを修正すれば良いのでしょうか。
アドバイスをどうぞ宜しくお願い致します。
javaScript
1<%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<!DOCTYPE html> 4<html> 5<head> 6<meta charset="UTF-8"> 7<title>海浜の安定汀線形状の予測計算</title> 8<%float[]X=(float[])request.getAttribute("X"); %> 9<%float[]Y=(float[])request.getAttribute("Y"); %> 10<% int num = (Integer)request.getAttribute("num"); %> 11<% int A = (Integer)request.getAttribute("A"); %> 12<% int B = (Integer)request.getAttribute("B"); %> 13<% int C = (Integer)request.getAttribute("C"); %> 14<% int D = (Integer)request.getAttribute("D"); %> 15<% int E = (Integer)request.getAttribute("E"); %> 16<% int F = (Integer)request.getAttribute("F"); %> 17</head> 18<body bgColor=CCFFFF leftMargin=5 topMargin=5 rightMargin=5> 19<CENTER> 20<TABLE border=0> 21 <TBODY> 22 <TR> 23 <TD align=middle><FONT face="MSP明朝" size=7><B>海浜</B> 24 </FONT></TD></TR> 25 <TR> 26<div class="menu"> 27 <ul style="list-style:none"> 28 <li#nav ul li{ 29 display: inline; 30 } ><a href="top.jsp">TOP</a></li> 31 32 <li#nav ul li{ 33 display: inline; 34 } ><a href="calculation.jsp">計算</a></li> 35 36 <li#nav ul li{ 37 display: inline; 38 } ><a href="?pagina=contacts">連絡</a></li> 39 40 </ul> 41 </div> 42 </TR> 43 44<canvas id="canvas" width="1000" height="600" style="background-color:white;"> 45</canvas> 46X[0] : ${X[0]}<br /> 47Y[0] : ${Y[0]}<br /> 48num : ${num}<br /> 49X.length:<%=X.length %><br> 50<SCRIPT> 51A = ${A}; 52B = ${B}; 53C = ${C}; 54D = ${D}; 55E = ${E}; 56F = ${F}; 57function drawLine() { 58 var canvas = document.getElementById('canvas'); 59 if (canvas.getContext) { 60 var gc = canvas.getContext('2d'); 61 gc.fillStyle = "rgb(255, 255, 255)"; 62 gc.fillRect(0, 0, gc.canvas.width, gc.canvas.height); 63 gc.fillStyle = "rgb(0, 255, 255)"; 64 gc.fillRect(0,0,A,10); 65 gc.fillRect(0,0,10,B); 66 gc.fillRect(0,B,C,10); 67 gc.fillRect(A,0,10,D); 68 gc.fillRect(A,D,E,10); 69// gc.fillRect(200,0,100,500); 70 gc.strokeStyle = "rgb(255, 0, 0)"; 71 gc.beginPath(); 72 gc.moveTo(X[0], Y[0]); 73 for(i = 1; i < num; i++) { 74 gc.lineTo(x[i] , y[i] ); 75 } 76 gc.stroke(); 77 78 } 79} 80 81</SCRIPT> 82<SCRIPT> 83var x = [<% for (int i=0; i<X.length;i++){ 84 if (i!=0){ 85 out.print(","); 86 } 87 out.print(X[i]); 88} 89 %>]; 90var y =[<%for (int i=0;i<Y.length;i++){ 91 if (i!=0){ 92 out.print(","); 93 94 } 95 out.print(Y[i]); 96} 97 98%>]; 99 100num = <%=num%>; 101 102for(i=0;i<X.length;i++){ 103 document.write("x[",i,"]=",x[i],","); 104 document.write("y[",i,"]=",y[i],"<br>"); 105} 106document.close(); 107drawLine(); 108 109</SCRIPT> 110 111<HR width="80%"> 112<FONT size=2>掲示者 113</FONT></CENTER></body> 114</html>
↑jspのようなのでJava無関係ではないですよ。「Servlet」は必要かもしれませんが
すみません。編集します。
ブラウザ開発ツールのコンソールにエラーか何か出ていませんか？
@fg723327さんへ
タグ編集ありがとうございます.
コンソールに出ているメッセージを付け足しました！
いや、そのコンソールはJavaのコンソールですよね。
JavaScriptの動作確認をするのは「ブラウザの開発ツールのコンソール」です。（そう書いたはず・・・）
https://www.javadrive.jp/javascript/error/index5.html
知識不足ですみません。
詳しく教えて頂き、ありがとうございます。
ブラウザ開発ツールのコンソールをみてみたところ、
Uncaught ReferenceError: X is not defined at hsufile:87
というエラーが出ていました。
ありがとうございます。
スクリプト内のXとYをxとyに変換したところ、グラフを描くことができました。
詳しい回答をありがとうございました。
回答は↓です。そちらにその解決方法をコメントしていただき、「解決済み」として当質問を締めてください。
回答1件
0
ベストアンサー
Uncaught ReferenceError: X is not defined at hsufile:87
上記 87行目は、「ブラウザのソースを表示」をした上での行数ですね。
jspでもJavaコードは実行されていますが、ブラウザ出力時には実行されたもの、出力指示が終わった状態のHTMLソースで出力されるので今、jspファイルで見ているコードの行数ではありません。
で、エラー内容としては「Xという変数は未定義である」ということです。
jsp上に
<%float[]X=(float[])request.getAttribute("X"); %>
という記述はありますが、JavaScriptとしてはXという変数は定義されていません。
xとXは別物です。
Javaの記述とJavaScriptの記述が入り乱れていて分かりづらいコードになっています。
そのあたりを整理して、明確にわけた記述にされてはいかがでしょうか。
蛇足：
HTML5でdocument.writeは使ってはいけない？ | 3streamer blog](http://blog.3streamer.net/html5-css3/document-write-html5-181/)
投稿2019/01/07 01:07
総合スコア80850
あなたの回答
tips
プレビュー
