

これらのコードを動作させることを目標としています。現段階では特定のタグを消滅を可能にすれば問題ないです。

今後の事を含めた解決も可能である場合は、タグを消滅するボタンに更に登録機能を付けたいと考えています。

★便宜上、下記で記述したリンクにおいてbunndle.jsを作成しており、その記述は今回は問題が多面化するため、削除しています。  
また、bunndle.js単体での機能は動作しております。

＜中核コード（今後結合予定）＞  
<https://qiita.com/dsk_datadog/items/6dfc55f35db24614107d>

対処方法などありましたら、よろしくお願いします。

現在参考中のリファレンス  
＜中核コード＞  
<https://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html>  
＜中核コード→実際に動くサンプルコード＞  
<https://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/demo/modern_dojo-
parser.html>

＜中核コード（今後結合予定）＞  
<https://qiita.com/dsk_datadog/items/6dfc55f35db24614107d>

＜機能実装に従い参考にしている最中のコード達＞  
<https://dojotoolkit.org/documentation/tutorials/1.10/dom_functions/index.html>  
<https://gis.stackexchange.com/questions/182364/uncaught-typeerror-cannot-
read-property-on-of-undefined>  
<https://dojotoolkit.org/documentation/tutorials/1.10/using_query/index.html>

* * *

エラーメッセージ

[code]

    Uncaught TypeError: Cannot read properties of undefined (reading 'on')
        at l (dojo.js.uncompressed.js:8613:13)
        at index.html:45:6
        at ja (dojo.js.uncompressed.js:1164:35)
        at dojo.js.uncompressed.js:1330:6
        at ka (dojo.js.uncompressed.js:1307:5)
        at ha (dojo.js.uncompressed.js:1325:4)
        at r (dojo.js.uncompressed.js:1492:7)
        at HTMLScriptElement.<anonymous> (dojo.js.uncompressed.js:1745:20)
    button.png:1          Failed to load resource: net::ERR_FILE_NOT_FOUND
    
[/code]

demo.css

[code]

    * {
        outline: none !important;
    }
    
    body {
        margin: 0;
        padding: 2em;
        font-family: Lucida Sans,Lucida Grande,Arial !important;
        font-size: 13px !important;
        background: white;
        color: #333;
    }
    
    button {
        -webkit-transition: background-color 0.2s linear;
        border-radius:4px;
        -moz-border-radius: 4px 4px 4px 4px;
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
        background-color: #E4F2FF;
        background-image: url("//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/form/images/button.png");
        background-position: center top;
        background-repeat: repeat-x;
        border: 1px solid #769DC0;
        padding: 2px 8px 4px;
        font-size:1em;
    }
    
    button:hover {
        background-color: #AFD9FF;
        color: #000000;
    }
    
    h1 {
        font-size:1.5em;
    }
    
    .break
    {
        float:none;
        clear:both;
    }
    
[/code]

index.html

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8" />
      <title>Web SQL Database</title>
      <link rel="stylesheet" href="demo.css" media="screen" type="text/css">
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dijit/themes/claro/claro.css" media="screen">
    </head>
    <body　class="claro">
    <input type="text" name="todo" />
    
    
    
    <button data-dojo-type="dijit/form/Button" type="button" name="register" id="Button1">
      <span>登録</span>
    
    
    </button>
    
    <table id="table">
      <thead>
        <tr>
          <span id="test">No Todo</span>
    
      
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <!-- TODOを追加していく -->
      </tbody>
    </table>
    
    
      <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
        <script>
        require(["dojo/parser", "dojo/dom", "dojo/dom-construct", "dojo/on","dijit/registry","dijit/form/Button", "dojo/domReady!"], function(parser,dom, domConstruct, on,registry){
        var myClick = function(evt){
            var test = dom.byId("test");
          domConstruct.empty("test");
    
            };
         
         on(registry.byId("button1"), "click", myClick);
         parser.parse();
            
        });
        </script>
      
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2023-01-08T08:23:39.957
93243
2023-01-08T14:41:49.293
2023-01-08T11:26:19.927
4236
56443
question
javascript
DOJOでボタンを押すと消えるタグを作る際の ONに関する問題


>
[code]

>     on(registry.byId("button1"), "click", myClick);
>     parser.parse();
>  
[/code]

[`dojo/parser`](https://dojotoolkit.org/reference-
guide/1.10/dojo/parser.html)の`parser.parse()`が`data-dojo-
type`によるWidgetの作成を行うことに注意してください。前行であればまだ`parser.parse()`の実行前なので`button1`
Widgetは作成されておらず、もちろん`registry.byId()`で取得することもできません。

[code]

    parser.parse().then(function(){
        on(registry.byId("button1"), "click", myClick);
    });
    
[/code]

と`parser.parse()`の完了を待って実行するのはどうでしょうか。

* * *

もう１点見逃していました。

>
[code]

>     <script
> src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js" data-
> dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
>  
[/code]

`dojo/parser`ですが、

  * `data-dojo-config="parseOnLoad: 1"` の指定により暗黙的に開始されています。
  * `parser.parse()`により明示的に開始されています。

詳しい挙動は把握していませんが、２つの実行は競合するように思われます。前述の通り、`parser.parse()`の完了後に`on()`を実行したいため、`parseOnLoad:
false` とし、`parser.parse()` のみにするのはどうでしょうか。


CC BY-SA 4.0
2023-01-08T11:22:41.267
93249
2023-01-08T14:41:49.293
2023-01-08T14:41:49.293
4236
4236
93243
answer