テキストボックスに数値を入力すること

前提・実現したいこと

グラフにテキストボックスからすうちを入力して、二分法の解を求めるようにする
ここに質問の内容を詳しく書いてください。
テキストボックスに

発生している問題・エラーメッセージ

テキストボックスに入力した数値がグラフに反映されません
テキストボックスでは二分法に必要な範囲の数値を入力する予定です。

エラーメッセージ

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件

ベストアンサー

x_b=document.nibun.b.value;

formのnameでアクセスさせるのはやめたほうがよいでしょう、たとえば

javascript
1x_b=document.querySelector('[name=b]').value;

投稿2020/10/20 05:09

yambejp

総合スコア116724

X863RJ

2020/10/20 05:16

Failed to execute 'querySelector' on 'Document': 'name=b' is not a valid selector. のエラーメッセージが出ました

yambejp

2020/10/20 05:22

domの作成の問題ですね。参照しようとした時点でHTML要素ができていないので scriptをHTMLの後ろの方に移してみてください document.writelnとか、よほどのことがなければ使ってはいけません。なんか新しい書き方と古い書き方がぐちゃぐちゃになっているのでもうすこしご自身で整理されたほうが良いと思います

X863RJ

2020/10/20 05:59

ypeError: Cannot read property 'value' of null が出てきました

yambejp

2020/10/20 06:03

たとえばこんな感じで表示されますよね？ <input type="text" name="b" value="123"> <script> var x_b=document.querySelector('[name=b]').value; console.log(x_b); </script> これを広げて行く感じで考えてください

X863RJ

2020/10/26 14:23

テキストボックスで値を入力できるようにしたいです。

X863RJ

2020/10/27 08:49

やってみました。consoleで数字が表示されるようになりました。

行動規範の内容に同意します