Q&A
「書き換え後の内容」が簡潔すぎて、間違いが含まれているのかも判断できません。index.mjsとutility.mjsに何を書いたのか、正確に書いていただけませんでしょうか。
JavaScriptのimport・exportを使って、buttonをクリックするとconsoleにテキストが表示される処理を書きたいです。
最初に記載している内容で思った通りには動くのですが、
index.mjsのほうにaddEventListenerの処理をもってくるほうが、
関数が増えて来たときに使うID名やイベントがひと目で見れて良いのかなと思い、
index.mjsのほうに以下の一文を書き、utility.mjsのほうは関数とconsole.logだけにしてみたのですが、読み込み時にconsole.logが一度動くだけで、想定していた動作にはなりませんでした。
（想定していた動作にならなかった方のコードは質問下部に記載しています）
なにか良い方法かまたは正しい書き方はこっちだよというのがあれば教えていただきたいです。
↓元コード
javascript
1//index.mjs 2import * as util from './utility.mjs' 3 4/////////////////////////////////////////////////////////////////////// 5 6util.modalOpen("js_open");
javascript
1//utility.mjs 2export function modalOpen(idName) { 3 document.getElementById(idName).addEventListener("click", function(){ 4 console.log("hello"); 5 }, false); 6} 7
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 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="format-detection" content="telephone=no"> 8 <script src='../js/index.mjs' type="module"></script> 9 </head> 10 <body> 11 <h1>ああああ</h1> 12 <button id="js_open"></button> 13 </body> 14 15</html>
↓書き換え後（想定通りに動作しなかった）
javascript
1// 書き換え後のindex.mjs 2import * as util from './utility.mjs' 3 4/////////////////////////////////////////////////////////////////////// 5 6document.getElementById("js_open").addEventListener("click", util.modalOpen(), false);
javascript
1// 書き換え後のutility.mjs 2export function modalOpen() { 3 console.log("hello"); 4}
回答2件
0
ベストアンサー
js
1document.getElementById("js_open").addEventListener("click", util.modalOpen(), false);
↓
js
1document.getElementById("js_open").addEventListener("click", util.modalOpen, false);
とするとどうなりますか？
投稿2020/02/06 05:52
総合スコア36960
0
書き換え後にdocument.getElementById("open")となっていますが、IDが正しくないようです。
投稿2020/02/06 05:49
総合スコア146018
あなたの回答
tips
プレビュー
