[tegecat]

【お使いの 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

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 0

いいねをした人: 居ません

[tegecat]

ありがとうございます。ご指摘の通りボタンに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

いいねをした人:

[投稿者]

投稿