My Snow Monkeyでjavascriptを読み込んだが動かない

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にtegecatにより1週、 6日前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #95952
    tegecat
    参加者
    1

    【お使いの Snow Monkey のバージョン】15.18.0
    【お使いの Snow Monkey Blocks のバージョン】13.7.3
    【お使いの Snow Monkey Editor のバージョン】6.2.1
    【お使いのブラウザ】chrome
    【当該サイトのURL】https://nekosippo.com/misobu/misoset/

    ### 実現したいこと

    上記URLのページで手作り味噌の材料の計算フォームを実現したいのですが、固定ページに直接scriptタグ内にソースを書くと動くのですが、my-snow-monkey内にスクリプトをおくと動きません。

    ### 発生している問題

    my-snow-monkey.phpに以下を書いてます。

    add_action(
    	'wp_enqueue_scripts',
    	function() {
    		wp_enqueue_script(
    			'misoCalc',
    			MY_SNOW_MONKEY_URL . '/js/main.js',
    			[],
    			false
    		);
    	}
    );

    該当ページのソースからリンクを辿ってファイルを読み込んでいることを確認したが動きません。

    直接ページのカスタムhtmlにスクリプトタグの中に書くと動きます。

    スクリプト

    function misoCalc() {
      const $doc = document;
      calButton = $doc.getElementById("cal_button");
    
      calButton.addEventListener("click", (e) => {
        let misoVolumes = $doc.forms.miso_form.miso_volume.value;
    
        const kouji = (0.6 * (misoVolumes * 10)) / 10;
        const soi = (0.4 * (misoVolumes * 10)) / 10;
        const drySoi = (0.2 * (misoVolumes * 10)) / 10;
        const nijiru = 100 * misoVolumes;
        const solt = 124 * misoVolumes;
    
        $doc.getElementById("kouji_value").innerHTML = kouji;
        $doc.getElementById("soi_value").innerHTML = soi;
        $doc.getElementById("dry_soi_value").innerHTML = drySoi;
        $doc.getElementById("nijiru_value").innerHTML = nijiru;
        $doc.getElementById("solt_value").innerHTML = solt;
      });
    }

    ### 試したこと

    コンソールを見てもエラーはありませんでした。
    ページのソースからリンクを辿るとスクリプトが表示されているので、間違ってはいないと思うのですが、どこに問題があるのかがわかりません。お気づきの点がございましたら教えていただけないでしょうか。よろしくお願いします。

    0
    いいねをした人: 居ません
    #95997
    キタジマ タカシ
    参加者
    1386

    読み込まれている js ファイル( https://nekosippo.com/wp/wp-content/plugins/my-snow-monkey/js/main.js ) をみてみると、misoCalc() は定義してありますが、ページ上のボタンには misoCalc() を呼び出すコードが無いようにみえます。js ファイルに addEventListner を記述するか、ボタンに onClick 属性を追加するなどの対応が必要ではないですかね?

    0
    いいねをした人: 居ません
    #96010
    tegecat
    参加者
    1

    ありがとうございます。ご指摘の通りボタンにonClick属性をつけ、main.jsファイルからaddEventlistener部分を削除したら動くようになりました。

    snowmonkeyのことではなくJavaScriptの呼び出し方が間違っていたのですね。勉強になりました。

    ボタン

    <input id="cal_button" class="btn btn-secondary btn-block col-2 form-control" name="calButton" type="button" value="計算" />
    

    main.js

    function misoCalc() {
      const $doc = document;
      const calButton = $doc.getElementById("cal_button");
    
      let misoVolumes = $doc.forms.miso_form.miso_volume.value;
    
      const kouji = (0.6 * (misoVolumes * 10)) / 10;
      const soi = (0.4 * (misoVolumes * 10)) / 10;
      const drySoi = (0.2 * (misoVolumes * 10)) / 10;
      const nijiru = 100 * misoVolumes;
      const solt = 124 * misoVolumes;
    
      $doc.getElementById("kouji_value").innerHTML = kouji;
      $doc.getElementById("soi_value").innerHTML = soi;
      $doc.getElementById("dry_soi_value").innerHTML = drySoi;
      $doc.getElementById("nijiru_value").innerHTML = nijiru;
      $doc.getElementById("solt_value").innerHTML = solt;
    }
    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「My Snow Monkeyでjavascriptを読み込んだが動かない」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ