68行目console.log(result)の答えがundefindになってしまう

javascript
1コード
2<!DOCTYPE html>
3<html>
4<head>
5<meta charset="utf-8">
6<title>ページタイトル</title>
7
8<!-- ── スタイルシート ── -->
9<style>
10#graph { background: #eee; }
11</style>
12</head>
13<body>
14 <!-- document.addEventListener('DOMContentLoaded', () => {
15   document.getElementById("result").value = 1;
16  }); -->
17    
18  <form name="nibun">
19    <label>aの値</label>
20    <input id="num1" type="number" name="a" value="0" step="0.01">
21    <input type="button" value="表示" onclick="disp1()">
22    <br>
23    <label>bの値</label>
24    <input id="num1" type="number" name="b" value="1" step="0.01">
25    <input type="button" value="表示" onclick="disp2()">
26    </form>
27  <!-- ── キャンバス ── -->
28  <canvas id="graph" width="800" height="600"></canvas>
29  <script>
30    /* ── 評価する関数 ── */
31    const F = x => x*x*2-3 //アロー関数
32    
33    /* ── 関数：二分法 ── */
34    const bisection = ( f, a, b, e ) => { //bisecetion 二等分
35    if( a>=b || f( a )*f( b )>=0 ){ return }
36    const slope = f( b )-f( a ); //slope 傾斜
37    let mid;
38    do {
39    mid = ( a+b )/2;
40    a =
41    f( mid )>0 ? ( slope>0 ? a : mid ) :
42    f( mid )<0 ? ( slope>0 ? mid : a ) : mid ;
43    b =
44    f( mid )>0 ? ( slope>0 ? mid : b ) :
45    f( mid )<0 ? ( slope>0 ? b : mid ) : mid ;
46    } while( b-a>e );
47    return mid ;
48    }
49    var x_a=0,x_b=0;
50    x_b=document.querySelector('[name=b]').value;
51    x_a=document.nibun.querySelector('[name=a]').value;
52    if(x_a){
53      console.log('発見',x_a);
54    }else{
55      console.log('見つからない');
56    }
57    console.log(x_a);
58    console.log(x_b);
59    /* ── 二文法を実行 ── */
60    function disp1(){
61      x_a=document.querySelector('[name=a]').value;
62    }
63    
64    function disp2(){
65      x_b=document.querySelector('[name=b]').value;
66    }
67      
68      const result = bisection( F, x_a,x_b, 0.0001 );
69      console.log( result );
70    /* ── グラフ描画 ── */
71    // キャンバス
72    const canvas = document.getElementById( "graph" );
73    const width = canvas.width, height = canvas.height;
74    // コンテキスト
75    const context = canvas.getContext( "2d" );
76    // 座標
77    const rate = width*0.1;//元は0.1
78    const range = { x: 4.5, y: 3.5 };
79    const cx = result || 0, cy = 0; //result:関数の答え
80    const uo = width/2-cx*rate, vo = height/2+cy*rate; //uo:幅、vo:高さ、
81    const u = x => uo+x*rate; 
82    const v = y => vo-y*rate;
83    
84    // 描画：座標軸
85    context.strokeStyle = "#999"; //ネズミ色
86    context.lineWidth = 1; //線の幅
87    context.beginPath();
88    context.moveTo( u( cx-range.x ), vo );
89    context.lineTo( u( cx+range.x ), vo );
90    context.moveTo( uo, v( cy-range.y ) );
91    context.lineTo( uo, v( cy+range.y ) );
92    context.stroke();
93    
94    // 描画：グラフ
95    context.strokeStyle = "#666";
96    context.lineWidth = 2;
97    context.beginPath();
98    context.moveTo( u( cx-range.x ), v( F( cy-range.x ) ) );
99    for( x=cx-range.x; x<=cy+range.x; x+=0.01 ){
100    context[ F(x)<range.y && F(x)<range.y ? "lineTo": "moveTo" ]( u( x ), v( F(x) ) );
101    }
102    //x,yの座標を描画
103    context.stroke();
104    
105    // 描画：二分法の解
106    if( result !== undefined ){
107    context.fillStyle = "#fcc"; //赤
108    context.strokeStyle = "#f00";//赤
109    context.lineWidth = 1;
110    context.beginPath();
111    context.arc( u( result ), vo, 8, 0, Math.PI*2 ); //円弧を作成する、（円弧の中心、半径、開始角度、終了角度）
112    //doucument.write(u(result));
113    context.fill();
114    context.stroke();
115    }
116    //描画：赤線、青線
117    //const draw = bisection( F, 0, 2, 0.0001 );
118    const uresult = u(result);
119    document.write("答え：");
120    document.write(result); //writelnで改行
121    document.write(uresult);
122    </script>
123<!-- ── スクリプト ── -->
124  </body>
125</html>
126

前提・実現したいこと

二分法の答えを求めるresultで適切な数値を出したい

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

aの値、bの値を入力するホームがグラフに反映されていない

 <input id="num1" type="number" name="a" value="0" step="0.01">
    <input type="button" value="表示" onclick="disp1()">
    <br>
    <label>bの値</label>
    <input id="num1" type="number" name="b" value="1" step="0.01">
    <input type="button" value="表示" onclick="disp2()">

inputのvalueではなくdisp1,disp2などで選択した数値を反映させたい

var x_a=0,x_b=0;
    x_b=document.querySelector('[name=b]').value;
    x_a=document.nibun.querySelector('[name=a]').value;
    if(x_a){
      console.log('発見',x_a);
    }else{
      console.log('見つからない');
    }
    console.log(x_a);
    console.log(x_b);
    /* ── 二文法を実行 ── */
    function disp1(){
      x_a=document.querySelector('[name=a]').value;
    }
    
    function disp2(){
      x_b=document.querySelector('[name=b]').value;
    }
      
      const result = bisection( F, x_a,x_b, 0.0001 );

答えの部分

答え：undefinedNaN

試したこと

発見　０
console.log('発見',x_a);
０　　　
console.log(x_a);
１
console.log(x_ｂ);
x => xx2-3
console.log(F);

補足情報（FW/ツールのバージョンなど）

二分法について
https://risalc.info/src/bisection-method.html

m.ts10806

2020/11/10 05:42

cosole.logが割りと適切な場所に入れられているように見受けられますが、コンソール確認されて、どうなっていたのでしょうか

X863RJ

2020/11/10 05:46

undefinedと表示されました

m.ts10806

2020/11/10 05:54

他にも途中でいくつもcosole.logされてますが、それぞれどうなっていましたか？

X863RJ

2020/11/10 05:56 編集

発見　０ console.log('発見',x_a); ０　　　 console.log(x_a); １ console.log(x_ｂ);

m.ts10806

2020/11/10 06:06

それは「試したこと」にもなるので、質問本文に記載してください。というかcosole.logきちんと使えてるようには見えますし、そのままデバッグしていけばすぐにも自身で解決できそうに思います。(ただ、document.writeでの画面出力は止めるべき)

X863RJ

2020/11/10 06:24

試したことに記載しました

oec

2020/11/10 06:33

すみません、回答しましたが、これで数字はログに出るもののグラフはうごかなくなっちゃいますね

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

回答2件

const Fのアロー関数としてるところが、関数でなく文字列として認識されているようです。

↓に変更したら動きました

JavaScript
1/* ── 評価する関数 ── */
2// const F = x => x*x*2-3 //アロー関数
3const F = function (x) { x * x * 2 - 3 }//アロー関数

投稿2020/11/10 06:32

oec

総合スコア271

自己解決

グラフy=x^2-3の場合、xの値がxが√3=1..,になるので範囲が+１...,-1...の間にならないといけいない。
xの値が-4,4の時は解は出ません。
結果は二分法の計算が正常に作動していたのでundefinedが出てもいいことになります。

投稿2020/11/10 07:00

編集2020/11/10 07:11

X863RJ

総合スコア3

m.ts10806

2020/11/10 07:02

「でないように対応」は別要件ということでしょうか。もう少し回答丁寧に書かれた方があとから見た人も理解しやすいと思います。

X863RJ

2020/11/10 07:05

別要件です。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！