web-dev-qa-db-ja.com

WordPressページにHTML/JavaScriptフォームを挿入する方法

私はWordPressページに小さなフォームを挿入しようとしています。それはユーザーの入力に基づいて小さな計算をして答えを返します。最初は、HTMLフォームをうまく表示できるもの全体（HTMLとJS（<script>タグ内））をコピーしようとしましたが、JSを実行しようとしてもうまくいきませんでした。

JSは次のようになります。

function calculateX(){
    var inputA, inputB, total;
    inputA = document.form.inputA.value;
    inputB = document.form.inputB.value;
    total = inputA + inputB * 10;
    document.getElementById("result").innerHTML = parseInt(total);
}

HTMLフォームは次のようになります。

<form name="form">
    InputA: <input type="text" name="inputA" /><br />
    InputB: <input type="text" name="inputB" /><br />
    <input type="button" value="Calculate" onclick="calculateX()" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

私は後でJSをcalculate.jsファイルに追加しながらページテキストエディタに上記のHTMLを挿入するだけでJSを実行するプラグインを作成しようとしました。それはこんな感じでした：

 <?php
 /*
 Plugin Name: Calculate
 */
 function calculate() {
      wp_register_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__);
 }
 add_action('wp_enqueue_scripts', 'calculate');
 ?>

ただし、どちらの解決策も機能しません。私はJavaScriptが初めてなので、このようなフォームを自分でWordPressに実装しようとしたのは今回が初めてなので、どこがうまくいかないのかはよくわかりません。

フォームは完璧に表示されますが、「計算」ボタンをクリックしても何も起こりません。

編集：これを修正するプロセスについての以下の@RRikeshのコメントを参照のこと。上記のコードは私には有効です。

pluginsphpjavascriptformshtml
1
rpbtz

あなたにはたくさんの問題があります：

1. WordPressパート：

あなたの関数は wp_enqueue_scripts にフックされていて、このようになっているはずです。

function wpse238953_calculate() {
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
 }
 add_action('wp_enqueue_scripts', 'wpse238953_calculate');

wp_enqueue_scripts と wp_enqueue_script の間のスペルが異なることに注意してください。

2. HTML/JSパート

ターゲット設定が簡単になるように、2つの入力フィールドにidを追加しましょう。

<form name="form">
    InputA: <input type="text" id="inputA" name="inputA" /><br />
    InputB: <input type="text" id="inputB" name="inputB" /><br />
    <input type="button" id="calculate" value="Calculate" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

それから、あなたのJSを書き直して、jQueryを使ってください（それを依存関係として追加したので）：

jQuery(document).ready(function($){
    'use strict';
  $('#calculate').mousedown(function(){
    var valueA = parseFloat( $('#inputA').val(), 10 ),
        valueB = parseFloat( $('#inputB').val(), 10 ),
        total = ( valueA + valueB ) * 10;

    $('#result').text( total );
  });
});

について読む：

1
RRikesh