解答欄を増やそうとこのようなコードをしました。
<form>
<fieldset id="set1">
始点:<input type="text" class="idInpX0" autocomplete="off">
終点:<input type="text" class="idInpY0" autocomplete="off" >
<input type="hidden" class="idInpX1"value="0" >
<input type="hidden" class="idInpY1" value="0">
<input type="button" onclick="DrawLine('set1');"value="結線">
</fieldset>
<fieldset id ="set2">
始点:<input type="text" class="idInpX0" autocomplete="off">
終点:<input type="text" class="idInpY0"autocomplete="off" >
<input type="hidden" class="idInpX1"value="0" >
<input type="hidden" class="idInpY1" value="0">
<input type="button" onclick="DrawLine('set2');"value="結線">
</fieldset>
</form>
<script>
oCanvas = document.getElementById('idCanvas');
ctx = oCanvas.getContext('2d');
nCanvasW = oCanvas.width;
nCanvasH = oCanvas.height;
oImage = new Image();
oImage.src = '電圧比試験3.jpg';
oImage.onload = () => {
ctx.drawImage(oImage, 0, 0);
};
oInpX0 = document.getElementById('idInpX0');
oInpY0 = document.getElementById('idInpY0');
oInpX1 = document.getElementById('idInpX1');
oInpY1 = document.getElementById('idInpY1');
a1oCoordinate = [oInpX0,oInpY0,oInpX1,oInpY1];
let point = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18',];
function DrawLine(id){
var X0,X1,Y0,Y1,Y2;
//var 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18;
let qid = "#" + id;
let X3 = document.querySelector(qid + " .idInpX0").value;
let Y3 = document.querySelector(qid + " .idInpY0").value;
let X4 = document.querySelector(qid + " .idInpX1").value;
let Y4 = document.querySelector(qid + " .idInpY1").value;
let a1oCdn = a1oCoordinate;
let cdn = new Array()
let allow = true; // false; //
for(let i = 0; i<a1oCdn.length; i++ ){
let value = a1oCdn[i].value;
cdn[i] = null;
if( value ){
cdn[i] = Number(value);
}
console.log("i : "+i);
console.log("cdn[i] : "+cdn[i]);
if( ! Number.isFinite(cdn[i]) ){
allow = false; // true; //
}else{
// console.log("cdn[i] : "+cdn[i]);
}
}
こうすると画像のようなエラーが出ます。
どのようにしたらよいでしょうか。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
何をしたいのか説明がまったくないし、画像は見えないのでサッパリですが・・・
まず、全体で「}」が一つ足りない。
(内容不明なので、どこが適切なのかわからないが、多分、最後かな?)
あとは、
>oInpX0 = document.getElementById('idInpX0');
以下で、該当IDの要素が存在しないので、そのあとで参照しようとしても、もともと取得できていないものを参照しようとするので、エラーになる。
>どのようにしたらよいでしょうか。
とりあえず、上記の辺りでしょうか。
しかしながら、varがあったり、letがあったり、何も宣言のない記述があったりと気まぐれな記述の感じ。
input要素の値を取得するのにも、複数で重複しているみたいだし、何をどうしたいのかよくわからん。
変数cdnにinput要素の値の配列を作成しようとしているみたいだけれど、そもそも値はDOMにあるし、手間をかけて不要なことをしているように感じる。
まぁ、後のハンドリングを良くしたいからという意味なら、
>a1oCoordinate = [oInpX0,oInpY0,oInpX1,oInpY1];
までで、十分ではないのかな。
入力値のチェック(有効数値や範囲その他など)をして、修正などをした結果を新しい配列に入れるのならわからないでもないけれど。
HTMLの方もクラス名てんこ盛りだし、(やりたいことがわからないので何とも言えないが)もっとすっきりできそうな気配が…
input type=hidden が必要なのかどうか、ご提示の範囲からはわからないけれど、雰囲気的にはいらなさそうな予感。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
追加ボタンを押した際に ok ボ...
-
Firefoxでwindow.openerが動作...
-
onclickが動作しない
-
リンクの追加
-
JSのボタンを複数う使うには
-
開いた子ウィンドウにあるボタ...
-
onchangeイベントを強制的に発...
-
ボタンをクリックするとテキス...
-
オークションサイト一括検索サ...
-
オンクリックで現在時刻の取得→...
-
VB.NETで<Input>タグ、<text...
-
onClickがinput type="image"だ...
-
formのfileの値をhiddenでも持...
-
return trueとreturn falseの用...
-
チェックボックスのON/OFFでVal...
-
<form action="#">の意味とは?
-
jQuery セレクトボックスで選択...
-
フォームが空欄の時にフォーム...
-
【jQuery】input nameの文字列...
-
新しくフォルダを作成したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
iOSのみダブルタップが必要
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
innerHTML内では改行は禁止?
-
クリックさせたいが、click()が...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JavascriptでDOM-based XSSの発...
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
開いた子ウィンドウにあるボタ...
-
jQueryで設定したイベントハン...
-
javascriptで作成されたテーブ...
-
HTMLのテキストボックスへのド...
-
テキストフィールド未入力の場...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
オンクリックで現在時刻の取得→...
おすすめ情報