valueの設定されていないinputに値を入れる

Question

下記画像の通り、HTMLにてコーディングされたinputに対して、ページ読み込み時にあらかじめ値を入れておいた状態にしたいです。

HTML側を操作することなく（現状のまま）Javascriptのみで、値を入れたいです。

Comments

[maisumakun]

調べたこと、試みたコードなどはありませんか？

[minami_456]

実施したこと
⑴Javascriptでvalueの値を変更する方法
　結果＞うまくいかず。inputにvalueの値が設定されていないから？

⑵inputに対して”setAttribute”にてvalue要素を追加する
　結果>うまくいかず。nameの指定がうまくいっていない？
name指定方法：document.getElementsByName("order[coupon_code]");

上記を試しました。

[maisumakun]

> 上記を試しました。

日本語ではなくコードを書いてください。記号の間違いなどのような可能性も考えられます。

Answer 1

ちょっと何をしたいのだからわからないですが、valueを指定すればよいだけでは？
空じゃなければplaceholderの意味はないですけどね

<input type="text" name="a" value="hoge" placeholder="test">

jsでどうしてもというならこんな感じですが
それって最初からvalueを指定すればいいだけのような気がします

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('[name=a]').value='hoge';
});
</script>
<input type="text" name="a" placeholder="test">

調整

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('[name="order[coupon_code]"]').value='hoge';
});
</script>
<input type="text" name="order[coupon_code]" placeholder="test">

Comments

[yambejp]

「あらかじめ値」をどう指定するかによります

[minami_456]

カートシステムのクーポンコード欄に数値を入力したいです。
クーポンコード入力欄は、カートシステムのショートコードで呼び出されているので、HTMLを直接触ることはできません。

なのでJavascriptでvalueにて値を挿入したいです。

[yambejp]

input要素のvalueプロパティーを変更してみてください
どのinputにどのvalueを初期値設定したいのか工夫が必要そうですが

[minami_456]

window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('[name=order[coupon_code]]').value='hoge';
});

ご教示頂きました、Javascriptはこのような記述でよろしいでしょうか？

nameが今回 name=order[coupon_code]
となっているので、指定の仕方が
⑴[name=order[coupon_code]]
⑵[name=[coupon_code]]
どちらが正しい記述なのでしょうか？

[yambejp]

document.querySelector('[name="order[coupon_code]"]').value='hoge';
です

[minami_456]

有難うございます！こちらでうまく反映されました。
本当に助かりました！

Answer 2

document.querySelecor('order[coupon_code]').value = 'あらかじめ値';