Q&A
cosole.logが割りと適切な場所に入れられているように見受けられますが、コンソール確認されて、どうなっていたのでしょうか
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/ツールのバージョンなど）
undefinedと表示されました
他にも途中でいくつもcosole.logされてますが、それぞれどうなっていましたか？
発見 ０
console.log('発見',x_a);
０
console.log(x_a);
１
console.log(x_ｂ);
それは「試したこと」にもなるので、質問本文に記載してください。
というかcosole.logきちんと使えてるようには見えますし、そのままデバッグしていけばすぐにも自身で解決できそうに思います。(ただ、document.writeでの画面出力は止めるべき)
試したことに記載しました
すみません、回答しましたが、これで数字はログに出るもののグラフはうごかなくなっちゃいますね
回答2件
0
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
総合スコア271
0
自己解決
グラフy=x^2-3の場合、xの値がxが√3=1..,になるので範囲が+１...,-1...の間にならないといけいない。
xの値が-4,4の時は解は出ません。
結果は二分法の計算が正常に作動していたのでundefinedが出てもいいことになります。
投稿2020/11/10 07:00
編集2020/11/10 07:11総合スコア3
あなたの回答
tips
プレビュー
