BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. CSS/HTML

[解決済み】Uncaught TypeError。プロパティ 'onclick' を null に設定できない [重複]。

2021-12-29 04:15:24

質問

Html（bootstrapを使用）のコードは以下の通りです。 

document.getElementById("subm").onclick = function () {
  alert("Hello WOrld");
}

<!DOCTYPE html>
<html>
<head>
  <title>Calculator</title>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
<body>
  <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="javascripts/bootstrap.min.js"></script>
  <script src="javascripts/hello.js"></script>
  <h1>Calculator</h1>
  <form class="form-horizontal center1">
    <div class="control-group">
      <label for="num1" class="control-label">Number1</label>
      <div class="controls">
        <input id="num1" type="number" placeholder="Enter an Integer">
      </div>
    </div>
    <div class="control-group">
      <label for="num2" class="control-label">Number2</label>
      <div class="controls">
        <input id="num2" type="number" placeholder="Enter an Integer">
      </div>
      <div class="control-group">
        <label for="options" class="control-label">Options</label>
        <div class="controls"><br>
          <select id="options">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <div class="controls"><br>
          <button id="subm" type="submit" class="btn">Calculate</button>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <input id="cal" type="text" placeholder="Calculator output" disabled="true">
        </div>
      </div>
    </div>
  </form>
</body>

ボタンをクリックしようとすると、エラーが発生します。

Uncaught TypeError: Cannot set property 'onclick' of null

解決方法は？

要素が読み込まれる前にスクリプトが実行されていることが問題だと思われます。

このスクリプトは hello.js ファイルは、DOM が作成される前に追加されます。

ここで解決策としては、DOMが準備できた後に、以下のようにスクリプトを実行することです。 

window.onload = function(){
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
    }
}

上記のような DOM 要素を扱う JavaScript コードはすべて、DOM が読み込まれた後にのみ実行されなければなりません。

デモ フィドル

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します