JavaScriptの要素の値を取得して、書き換えるには？

本を見ながら、YouTubeAPIを使ったビデオギャラリーを完成させました。
そこで、自分で新たに以下の機能を作りたいと思いました。

・検索フォームを作って、その検索結果を反映させた内容を表示させる。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>インプレス いちばんやさしいJavaScriptの教本</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h3>Video Gallery</h3>
  <section>
    <h2>検索ワード</h2>
    <form action="" id="form">
    <input type="text" id="form" name="word">
    <input type="submit" id="buttonid" value="検索">
    </form>
  </section>
  <div id="videoList">
    
  </div>
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

app.js

let command;
document.getElementById('form').onsubmit = function() {
  command = document.getElementById('form').word.value;
  console.log(command);
  return false;
};
// リクエストパラメータのセット
const KEY = 'AIzaSyDyVRwxsZpzbBvZRzC_eET--zhRaA7kMsA'; // API KEY
let url = 'https://www.googleapis.com/youtube/v3/search?'; // API URL
url += 'type=video';            // 動画を検索する
url += '&part=snippet';         // 検索結果にすべてのプロパティを含む
url += '&q=' + command;              // 検索ワード このサンプルでは music に指定
url += '&videoEmbeddable=true'; // Webページに埋め込み可能な動画のみを検索
url += '&videoSyndicated=true'; // youtube.com 以外で再生できる動画のみに限定
url += '&maxResults=6';         // 動画の最大取得件数
url += '&key=' + KEY;           // API KEY

// HTMLが読み込まれてから実行する処理
$(function() {
  // youtubeの動画を検索して取得
  $.ajax({
    url: url,
    dataType : 'jsonp'
  }).done(function(data) {
    if (data.items) {
      setData(data); // データ取得が成功したときの処理
    } else {
      console.log(data);
      alert('該当するデータが見つかりませんでした');
    }
  }).fail(function(data) {
    alert('通信に失敗しました');
  });
});

// データ取得が成功したときの処理
function setData(data) {
  let result = '';
  let video  = '';
  // 動画を表示するHTMLを作る
  for (let i = 0; i < data.items. length; i++) {
    video  = '<iframe src="https://www.youtube.com/embed/';
    video  +=  data.items[i].id.videoId;
    video  += '" allowfullscreen></iframe>';
    result += '<div class="video">' + video + '</div>';
  }
  // HTMLに反映する
  $('#videoList').html(result);
}

以上のようなコードで書いてみたのですが、うまくいきません。

*追記
let command;
document.getElementById('form').onsubmit = function() {
command = document.getElementById('form').word.value;
console.log(command);
return false;
};

cosole.logで確認したところ、変数のcommandにフォームで入力した値が入ってないことが分かりました。
formボタンが押されたら、フォームの入力値を変数commandに代入したいのですが、どのようにしたらいいのでしょうか？

詳しい方、どなたかお願いいたします。

行動規範の内容に同意します

回答1件

こちらsubmitがどこにも見当たらないので、ボタンをクリックしても値が送信されないのではないでしょうか。

<button id="buttonid">検索</button>

<form action="入力情報を飛ばす先へのパス（URLやローカルのファイル名など）" method=post>
    <input type="text" id="form" name="text">
    <input type="submit" value="検索">
</form>

蛇足になるかもしれませんが、こちらの記事に分かりやすくformの作成方法が記述されておりますので
ご参考にされてはいかがでしょうか？
https://creive.me/archives/13526/

投稿2019/06/24 12:46