Q&A
前提・実現したいこと
グラフにテキストボックスからすうちを入力して、二分法の解を求めるようにする
ここに質問の内容を詳しく書いてください。
テキストボックスに
発生している問題・エラーメッセージ
テキストボックスに入力した数値がグラフに反映されません
テキストボックスでは二分法に必要な範囲の数値を入力する予定です。
エラーメッセージ
Cannot read property 'value' of null at nibun1013.html:40
該当のソースコード
Javascript ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ページタイトル</title> <!-- ── スタイルシート ── --> <style> #graph { background: #eee; } </style> </head> <body> <form name="nibun"> <label>aの値</label> <input type="number" name="a" value="0" step="0.01"> <input type="button" value="表示" onclick="disp1()"> <br> <label>bの値</label> <input type="number" name="b" value="0" step="0.01"> <input type="button" value="表示" onclick="disp2()"> </form> <!-- ── キャンバス ── --> <canvas id="graph" width="800" height="600"></canvas> <script> /* ── 評価する関数 ── */ const F = x => x*x*2-3 //アロー関数 /* ── 関数：二分法 ── */ const bisection = ( f, a, b, e ) => { //bisecetion 二等分 if( a>=b || f( a )*f( b )>=0 ){ return } const slope = f( b )-f( a ); //slope 傾斜 let mid; do { mid = ( a+b )/2; a = f( mid )>0 ? ( slope>0 ? a : mid ) : f( mid )<0 ? ( slope>0 ? mid : a ) : mid ; b = f( mid )>0 ? ( slope>0 ? mid : b ) : f( mid )<0 ? ( slope>0 ? b : mid ) : mid ; } while( b-a>e ); return mid ; } var x_a=0,x_b=0; x_b=document.querySelector([name="b"]).value; x_a=document.nibun.querySelector([name="a"]).value; /* ── 二文法を実行 ── */ function disp1(){ x_a==document.nibun.x_a.value; } function disp2(){ x_b==document.nibun.x_b.value; } const result = bisection( F, a,b, 0.0001 ); console.log( result ); /* ── グラフ描画 ── */ // キャンバス const canvas = document.getElementById( "graph" ); const width = canvas.width, height = canvas.height; // コンテキスト const context = canvas.getContext( "2d" ); // 座標 const rate = width*0.1;//元は0.1 const range = { x: 4.5, y: 3.5 }; const cx = result || 0, cy = 0; //result:関数の答え const uo = width/2-cx*rate, vo = height/2+cy*rate; //uo:幅、vo:高さ、 const u = x => uo+x*rate; const v = y => vo-y*rate; // 描画：座標軸 context.strokeStyle = "#999"; //ネズミ色 context.lineWidth = 1; //線の幅 context.beginPath(); context.moveTo( u( cx-range.x ), vo ); context.lineTo( u( cx+range.x ), vo ); context.moveTo( uo, v( cy-range.y ) ); context.lineTo( uo, v( cy+range.y ) ); context.stroke(); // 描画：グラフ context.strokeStyle = "#666"; context.lineWidth = 2; context.beginPath(); context.moveTo( u( cx-range.x ), v( F( cy-range.x ) ) ); for( x=cx-range.x; x<=cy+range.x; x+=0.01 ){ context[ F(x)<range.y && F(x)<range.y ? "lineTo": "moveTo" ]( u( x ), v( F(x) ) ); } //x,yの座標を描画 context.stroke(); // 描画：二分法の解 if( result !== undefined ){ context.fillStyle = "#fcc"; //赤 context.strokeStyle = "#f00";//赤 context.lineWidth = 1; context.beginPath(); context.arc( u( result ), vo, 8, 0, Math.PI*2 ); //円弧を作成する、（円弧の中心、半径、開始角度、終了角度） //doucument.write(u(result)); context.fill(); context.stroke(); } //描画：赤線、青線 //const draw = bisection( F, 0, 2, 0.0001 ); const uresult = u(result); document.write("答え："); document.write(result); //writelnで改行 document.write(uresult); </script> <!-- ── スクリプト ── --> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
x_b=document.querySelector([name="b"]).value;
に変更しました。
参考にしたサイト
http://js.k-sakabe.com/calc_input.html
補足情報（FW/ツールのバージョンなど）
Windows10 pro
テキストエディタ:viscode
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
x_b=document.nibun.b.value;
formのnameでアクセスさせるのはやめたほうがよいでしょう、たとえば
javascript
1x_b=document.querySelector('[name=b]').value;
投稿2020/10/20 05:09
総合スコア114784
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/20 05:16
2020/10/20 05:22
2020/10/20 05:59
2020/10/20 06:03
2020/10/26 14:23
2020/10/27 08:49