Q&A
ご回答ありがとうございます。
ご指摘通り実装したところ、エラーはなくなりました！
ですが、こちらも値に何もセットされませんでした。。
前提・実現したいこと
html内の<input>の値をjsを用いて設定する拡張機能を作成しています。
ページ内にあるinputに値を入力し、ブラウザを閉じ、再度そのページを開いた際に<input>の値を入力した値に書き換えたいです。
また、ページ内のinputに値が入力されなかった場合は適用されないようにしたいです。
ですがエラーになってしまいます。
https://lab.syncer.jp/Web/JavaScript/Snippet/29/
こちらを参考にしてみましたが、下記のエラーがでてきます。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannnot set property ”value" of null at main.js:1
該当のソースコード
main.js
1document.getElementById("inputID").value = "50";
main.html
1<form id = "formID"> 2 <input type="number" class = "TiffOne-input-button" value="10" id="inputID"/> 3</form>
試したこと
main.jsの
document.getElementById("inputID").value = "50";
を
document.forms.formID.inputID.value = "50";
に変更してもダメでした。
変更するとこのようなエラー分になりました。
Uncaught TypeError: Cannot error property "inputID" of undefined at main.js:1
補足情報（FW/ツールのバージョンなど）
Edge(chromium版）拡張機能です。
回答3件
0
エラーはnullにはvalueというプロパティなんて無いよというメッセージです
つまりdocument.getElementById("inputID")がなにもつかめなかったということ
javascript
1document.getElementById("inputID").value = "50"; 2↓↓↓ 3window.addEventListener('DOMContentLoaded', ()=>{ 4 document.getElementById("inputID").value = "50"; 5});
投稿2021/06/08 01:18
総合スコア114843
0
ページのロードが完了する前にコードが走っているのではないでしょうか。
下記を試してみてください。
JavaScript
1window.onload = function () { 2 document.getElementById("inputID").value = "50"; 3};
投稿2021/06/08 01:16
総合スコア8402
console.log("ok");でも入れて、そこが走っているかを確認してください。
ついでに
var elem = document.getElementById("inputID");
console.log(elem);
elem.value = "50";
とでもしておいたほうがチェックがはかどりますね。
ありがとうございます！
記載位置を修正したところ適用されました！
ご回答いただきありがとうございます。<m(__)m>
0
ベストアンサー
コードが一部過ぎて一概には言えませんが、要素が取得できてない（nullであることから）のは明らかなので、main.jsの読み込み位置がhtmlより前にあるんじゃないでしょうか。
DOMContentLoadedのイベントを挟むか、</body>の前にmain.jsを置いてください。
投稿2021/06/08 01:16
総合スコア80850
情報が少ない中、ありがとうございます。
html内にボタンを追加し、それが押された際に値を変更する。といった実装を行ってみたところ変更されました。
htmlより前に読み込んでいるという点かもしれません。少し調査してみます。
やはり、htmlより前にmain.js（document.getElementByID("inputID").value = "50";
を読み込んでいたことが原因のようでした。
記載位置を後ろにしたところ解決しました。ありがとうございます。
冒頭に書いたとおり、コードが一部過ぎますので他の回答者も存在しないものに対して想像するしかなく、それは質問者さんの現状と合致してない可能性はあります（最初の回答時点でも「だろう」です）。
コードはコピペで再現できるよう、なるべく全体提示してください。
あれ？それなら他の回答も言ってることは同じで解決策も同じですよ。
対象要素の読み込みを待つかどうかですから。
すみませんでした。
ありがとうございます。
そうなんですね、
すべての回答者様に高評価をつけさせていただきました！
ありがとうございました<m(__)m>
それぞれの機能についても調べてください。そのために回答にリファレンスへのリンクをつけています。
わかりました。。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/08 01:30
2021/06/08 01:33
2021/06/08 01:40 編集