TypeScriptでFormタグのactionを操作する

Question

したいこと

ログアウトボタンを押下したら、formタグのactionにURLが代入され、そのURLに遷移するようにしたいです。

<form name="logout_form" method="POST" (click)="logoutUrl()" action=""></form>
<a href="javascript:logout_form.submit()"><button>ログアウト</button></a>

logoutUrl() {
  document.logout_form.action = 'http://xxx';
}

困っていること

いくつか試したのですが、エラーになりactionにURLが代入されませんでした。

試したこと

1.以下のように書き直してみましたが、エラー『プロパティ'logout_form'は型'Document'に存在しません』が出ました。

logoutUrl() {
  document.logout_form.action = 'http://xxx';
}

2.以下のように書き直してみましたが、どれもエラー『プロパティ'action'は型'NodeListOf<HTMLElement>'に存在しません』が出ました。

logoutUrl() {
  var formAction = document.getElementsByName('logout_form');
  formAction.action = 'http://xxx';
}

logoutUrl() {
  var formAction = document.getElementsByName('logout_form') as NodeListOf<HTMLElement>;
  formAction.action = 'http://xxx';
}

最後に

VScodeを用いて実装を行っています。
どうにかTSでactionを書き換えたいです。
皆様、ご教授のほどよろしくお願いいたします。

Comments

[maisumakun]

> どれも

本当ですか？「document.logout_form.action = 'http://xxx';」は別なエラーになるかと思います（引用符が化けているのはこの欄のバグのようです）。

[退会済みユーザー]

ご指摘ありがとうございます。
たしかにエラー内容が間違っていました。
修正いたしました。

Answer 1

getElementsByNameはElementsと複数形になっているように、複数個取れるので1つだけ動かしたい場面には適当ではありません。

型指定もできるquerySelectorを使うのが手軽です。

  var formAction = document.querySelector<HTMLFormElement>('[name="logout_form"]');
  formAction?.action = 'http://xxx';

Comments

[退会済みユーザー]

ご回答ありがとうございました。
おかげさまでエラーも出ず、やりたいことが実現しました。
getElementsByNameやquerySelectorなどの関数もしっかり勉強します。