javascriptで新規に作成したHTMLの要素に対し、onclickイベントを追加したいが、追加されずに、別の挙動が発生する

前提・実現したいこと

javascriptで、createElementを使って追加した要素に対し、さらにjavascriptでonclickイベントを追加し、そのonclickイベントに自作の関数を設定したいと思っています。

発生している問題・エラーメッセージ

createElementにより、要素は新規に作成されますが、
①onclickイベントが追加されません。
②onclickイベントに追加したはずの関数が、新規に作成した要素をクリックしていないのに、実行されます。

該当のソースコード

javascript
1"use strict";
2function createFormer(){
3    var element = document.createElement("p");
4    element.innerText = "Hello world";
5    element.onclick = result();
6    document.body.appendChild(element);
7}
8function result(){
9    console.log("Hello World");
10}
11

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>JavaScriptの学習</title>
7</head>
8<body>
9    <p onclick ="createFormer()">テスト</p>
10    <script src="js/practice_switch_2.js"></script><!--//フォルダ名jsの中のpractice_switch_2.jsというファイルを読み込む-->
11</body>
12</html>

試したこと

①https://techacademy.jp/magazine/20732
上記サイトを参考に、javascriptを記載しました。
自分の認識としては、要素をcreateElementで作成し、その要素を変数にし、その変数にonclickを設定することで、新規に作成した要素にonclickイベントが追加されるはずだと考えています。
②作成したHTMLをオンロードし、<p onclick ="createFormer()">テスト</p>をクリックした後、chromeの開発者モードのELEMENTを確認したところ、新規に作成された要素にonclickイベントが入っていないことがわかりました（innerTextは追加されていることがわかったいます。）
③②の後、consoleをみたところ、"hello world"となっているため、result()が実行されてしまっていることもわかっています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

js
1// element.onclick = result();
2//                         ↓
3   element.onclick = result;

投稿2021/01/01 05:18

kei344

総合スコア69400

komattakomatta

2021/01/01 05:28 編集

ご回答誠にありがとうございます。 ()を抜くだけで挙動が変わるということを知りませんでした。何故なのかについて、どういう観点から調べるべきなのでしょうか。可能でしたら教えてください。よろしくお願いいたします。

kei344

2021/01/01 05:34

element.onclick = result(); // ←関数の実行した結果を代入 element.onclick = result; // ←関数自体を代入

komattakomatta

2021/01/01 05:40

ご回答ありがとうございます。貴重な知識を一つ増やすことができました。自分には知識そのものももちろんですが、問題の所在の可能性を探る力の伸ばし方がわかっていないという欠点があるということもわかりました。知識の向上に対して努力するとともに、問題の所在の可能性を探る力を伸ばすためにはどうすればいいのかについても考えながら勉強するようにします。

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